React-Router外部リンク

反応アプリでルートを処理するためにreact-routerを使用しているので、外部リソースにリダイレクトする方法があるかどうか知りたいです。

誰かがヒットしたとしましょう：

example.com/privacy-policy

リダイレクトしたい：

example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies

私はindex.htmlの読み込みでプレーンJSでそれを書くのを避けるのにまったくゼロのヘルプを見つけています：

if ( window.location.path === "privacy-policy" ){
  window.location = "example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies"
}

以下は、React Routerを使用して外部リンクにリダイレクトするためのワンライナーです。

<Route path='/privacy-policy' component={() => { 
     window.location.href = 'https://example.com/1234'; 
     return null;
}}/>

Reactの純粋なコンポーネントの概念を使用して、コンポーネントのコードを単一の関数に減らし、何もレンダリングするのではなく、ブラウザーを外部URLにリダイレクトします。

React Router 3と4の両方で動作します。

<Link />react-routerのコンポーネントを使用する必要はありません。

外部リンクに移動する場合は、アンカータグを使用します。

<a target="_blank" href="https://meetflo.zendesk.com/hc/en-us/articles/230425728-Privacy-Policies">Policies</a>

私は実際に自分のコンポーネントを構築してしまいました。要素<Redirect> から情報を取得react-routerするため、ルートに保持できます。といった：

<Route
  path="/privacy-policy"
  component={ Redirect }
  loc="https://meetflo.zendesk.com/hc/en-us/articles/230425728-Privacy-Policies"
  />

これが私のコンポーネントincaseです-誰もが興味があります：

import React, { Component } from "react";

export class Redirect extends Component {
  constructor( props ){
    super();
    this.state = { ...props };
  }
  componentWillMount(){
    window.location = this.state.route.loc;
  }
  render(){
    return (<section>Redirecting...</section>);
  }
}

export default Redirect;

編集-注：これはでありreact-router: 3.0.5、4.xではそれほど単純ではありません

反応ルーターを要求する必要はありません。このアクションはネイティブで実行でき、ブラウザによって提供されます。

ただ使う window.location

class RedirectPage extends React.Component {
  componentDidMount(){
    window.location.replace('http://www.google.com')
  }
}

react-routerのLinkコンポーネントを使用すると、それを実行できます。「to」プロップでは、3つのタイプのデータを指定できます。

• a string：リンクの場所の文字列表現。場所のパス名、検索、およびハッシュプロパティを連結して作成されます。
• オブジェクト：次のプロパティのいずれかを持つことができるオブジェクト：
  • pathname：リンク先のパスを表す文字列。
  • search：クエリパラメータの文字列表現。
  • hash：URLに挿入するハッシュ。例：＃a-hash。
  • state：場所に永続化する状態。
• 関数：現在の場所が引数として渡され、場所の表現を文字列またはオブジェクトとして返す関数

あなたの例（外部リンク）の場合：

https://example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies

次のことができます。

<Link to={{ pathname: "https://example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies" }} target="_blank" />

タイトル、ID、クラス名などの小道具を渡すこともできます。

ここでいくつかの情報を使用して、ルート宣言内で使用できる次のコンポーネントを思いつきました。React Router v4と互換性があります。

typescriptを使用していますが、ネイティブjavascriptに変換するのはかなり簡単です。

interface Props {
  exact?: boolean;
  link: string;
  path: string;
  sensitive?: boolean;
  strict?: boolean;
}

const ExternalRedirect: React.FC<Props> = (props: Props) => {
  const { link, ...routeProps } = props;

  return (
    <Route
      {...routeProps}
      render={() => {
        window.location.replace(props.link);
        return null;
      }}
    />
  );
};

そして以下と一緒に使用します：

<ExternalRedirect
  exact={true}
  path={'/privacy-policy'}
  link={'https://example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies'}
/>

私はこれで運が良かった：

  <Route
    path="/example"
    component={() => {
    global.window && (global.window.location.href = 'https://example.com');
    return null;
    }}
/>

React-Routerがこのサポートを提供するとは思わない。ドキュメントが言及します

<Redirect>は、アプリケーションの別のルートへのリダイレクトを設定して、古いURLを維持します。

代わりにReact-Redirectのようなものを使用してみることができます

Alanの回答を拡張するには、「http：」または「https：」を含む「to」属性を持つ<Route/>すべて<Link/>のを正しい外部リソースにリダイレクトするを作成できます。

以下は、に直接配置できるこの動作例です<Router>。

<Route path={['/http:', '/https:']} component={props => {
  window.location.replace(props.location.pathname.substr(1)) // substr(1) removes the preceding '/'
  return null
}}/>

V3の場合、V4でも機能する可能性があります。エリックの答えから離れて、「http」がURLに存在しないローカル開発を処理するなど、もう少し行う必要がありました。また、同じサーバー上の別のアプリケーションにリダイレクトしています。

ルーターファイルに追加：

import RedirectOnServer from './components/RedirectOnServer';

       <Route path="/somelocalpath"
          component={RedirectOnServer}
          target="/someexternaltargetstring like cnn.com"
        />

そしてコンポーネント：

import React, { Component } from "react";

export class RedirectOnServer extends Component {

  constructor(props) {
    super();
    //if the prefix is http or https, we add nothing
    let prefix = window.location.host.startsWith("http") ? "" : "http://";
    //using host here, as I'm redirecting to another location on the same host
    this.target = prefix + window.location.host + props.route.target;
  }
  componentDidMount() {
    window.location.replace(this.target);
  }
  render(){
    return (
      <div>
        <br />
        <span>Redirecting to {this.target}</span>
      </div>
    );
  }
}

export default RedirectOnServer;

TypescriptでReactを使用すると、関数はでなく、react要素を返す必要があるため、エラーが発生しますvoid。だから私はルートレンダーメソッドを使って（そしてReact router v4を使って）このようにしました：

redirectToHomePage = (): null => {
    window.location.reload();
    return null;
  };    
<Route exact path={'/'} render={this.redirectToHomePage} />

代わりwindow.location.assign()にwindow.location.replace()なども使用できる場所

サーバー側のレンダリングを使用している場合は、を使用できますStaticRouter。あなたの持つcontextなどpropsして、追加<Redirect path="/somewhere" />のアプリでコンポーネントを。これは、react-routerがリダイレクトコンポーネントと一致するたびに、静的ルーターに渡したコンテキストに何かを追加して、パスがリダイレクトコンポーネントと一致することを通知するという考え方です。リダイレクトがヒットしたことがわかったので、探しているリダイレクトかどうかを確認するだけです。その後、サーバーを介してリダイレクトします。ctx.redirect('https://example/com')。

以下を使用して、react-router-domでリダイレクトを実現できました

<Route exact path="/" component={() => <Redirect to={{ pathname: '/YourRoute' }} />} />

私の場合、ユーザーがルートURL http://myapp.comにアクセスするたびにアプリ内の別の場所にリダイレクトする方法を探していましたhttp://myapp.com/newplace。したがって、上記が役立ちました。