web-dev-qa-db-ja.com

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"
}
javascriptreactjsredirectreact-routerreact-router-redux
51
Eric Hodonsky

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

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

ここに私のコンポーネントincase-anyoneがあります：

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ではそれほど単純ではありません

29
Eric Hodonsky

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

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

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

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

90
Evgeny Lukianchikov

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

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

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

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

window.locationを使用するだけです

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

ここでいくつかの情報を使用して、ルート宣言内で使用できる次のコンポーネントを思い付きました。 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'}
/>
2
Jens Bodal

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

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

代わりに React-Redirect のようなものを使用してみてください。

0
ytibrewala

私は次を使用してreact-router-domでリダイレクトを達成することができました

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

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

0
walecloud

V3では、V4でも機能する場合があります。 Relicの答えから離れて、「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;
0
MattC