React Routerを使用してページをリダイレクトする最良の方法は何ですか？

Question 1

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

使用する browserHistory.push("/path")

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

使用する 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
}

React Router v4にはとがthis.context.history.push("/path")ありthis.props.history.push("/path")ます。詳細：React Router v4で履歴をプッシュする方法

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

Question 2

実際には、ユースケースによって異なります。

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 />期待した方法で作業したい場合は、コンポーネントのrenderメソッド内に配置して、最終的にDOM要素と見なされるようにしてください。そうしないと機能しません。

2）特定のアクションの後でリダイレクトしたい場合（アイテムの作成後など）

その場合、履歴を使用できます。

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

または

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

履歴にアクセスするために、と呼ばれるHOCでコンポーネントをラップできます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 />最初に使用することだと思います。特にパフォーマンスが原因です。

Question 3

これで、react-router v15.1以降でuseHistoryフックできます。これは非常にシンプルで明確な方法です。ソースブログの簡単な例を以下に示します。

import { useHistory } from "react-router-dom";

function BackButton({ children }) {
  let history = useHistory()
  return (
    <button type="button" onClick={() => history.goBack()}>
      {children}
    </button>
  )
}

これは、任意の機能コンポーネントおよびカスタムフック内で使用できます。そして、これは他のフックと同じようにクラスコンポーネントでは機能しません。

これについて詳しくは、https：//reacttraining.com/blog/react-router-v5-1/#usehistoryをご覧ください。

Question 4

反応ルーターdomライブラリuseHistoryを使用することもできます。

`
import { useHistory } from "react-router-dom";

function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}
`

https://reactrouter.com/web/api/Hooks/usehistory

Question 5

最も簡単な方法の1つ：Linkを次のように使用します。

import { Link } from 'react-router-dom';

<Link to={`your-path`} activeClassName="current">{your-link-name}</Link>

divセクション全体をリンクとしてカバーしたい場合：

 <div>
     <Card as={Link} to={'path-name'}>
         .... 
           card content here
         ....
     </Card>
 </div>

Question 6

あなたも缶Redirect内でRoute次のように。これは無効なルートを処理するためのものです。

<Route path='*' render={() => 
     (
       <Redirect to="/error"/>
     )
}/>