[解決済み] React Routerでページをリダイレクトする方法とは？[クローズド］

質問

私はReact Routerに新しいですし、ページをリダイレクトするために非常に多くの方法があることを学びます。

1. 使用方法 browserHistory.push("/path")

   import { browserHistory } from 'react-router';
   //do something...
   browserHistory.push("/path");
   
   

2. 使用方法 this.context.router.push("/path")

   class Foo extends React.Component {
       constructor(props, context) {
           super(props, context);
           //do something...
       }
       redirect() {
           this.context.router.push("/path")
       }
   }
   
   Foo.contextTypes = {
       router: React.PropTypes.object
   }
   
   

3. React Router v4では、以下のように this.context.history.push("/path") と this.props.history.push("/path") . 詳細 React Router v4でHistoryにプッシュする方法は？

これらのオプションでとても混乱しています。ページをリダイレクトする最良の方法はありますか？

どのように解決するのですか？

実際には、ユースケースに依存します。

1) 不正なユーザからルートを保護したい。

このような場合は <Redirect /> というコンポーネントを使用し、以下のようなロジックを実装することができます。

import React from 'react'
import  { Redirect } from 'react-router-dom'

const ProtectedComponent = () => {
  if (authFails)
    return <Redirect to='/login'  />
  }
  return <div> My Protected Component </div>
}

もし、あなたが <Redirect /> を期待通りに動作させたい場合は、最終的に DOM 要素と見なされるように、コンポーネントの render メソッドの内部に配置する必要があることに注意してください。

2) 特定のアクションの後にリダイレクトしたい場合 (例えば、アイテムを作成した後)

その場合、履歴を使用することができます。

myFunction() {
  addSomeStuff(data).then(() => {
      this.props.history.push('/path')
    }).catch((error) => {
      console.log(error)
    })

または

myFunction() {
  addSomeStuff()
  this.props.history.push('/path')
}

履歴にアクセスできるようにするには、コンポーネントを withRouter . コンポーネントをそれでラップすると、それは match location と history のプロップスです。の公式ドキュメントを参照してください。 withRouter .

もしあなたのコンポーネントが <Route /> コンポーネントの子である場合、つまり、そのコンポーネントが <Route path='/path' component={myComponent} /> のようなものであれば、コンポーネントを withRouter というのは <Route /> パス match , location そして history をその子へ送る。

3) 要素をクリックした後にリダイレクトする

ここでは、2つのオプションがあります。あなたは history.push() に渡すことで onClick イベントに渡すことです。

<div onClick={this.props.history.push('/path')}> some stuff </div>

を使うか、あるいは <Link /> コンポーネントを使うこともできます。

 <Link to='/path' > some stuff </Link>

この場合の経験則としては、なるべく <Link /> を最初に使うようにすることだと思います。特にパフォーマンスのためでしょう。