web-dev-qa-db-ja.com

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で履歴にプッシュする方法？

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

reactjsreduxreact-router
52
Liutong Chen

実際にはそれはあなたのユースケースに依存します

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というHOCでラップすると、コンポーネントをmatchlocationおよびhistory propsに渡すことができます。詳細については、 withRouter に関する公式ドキュメントをご覧ください。

あなたのコンポーネントが<Route />コンポーネントの子であるならば、それが<Route path='/path' component={myComponent} />のようなものであれば、withRouterで括る必要はない<Route />はmatch、location、そしてhistoryをその子に渡します。

3）要素をクリックしてからリダイレクトする

ここには2つの選択肢があります。 onClickイベントに渡すことでhistory.Push()を使用できます

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

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

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

私はこのケースの経験則は（私はパフォーマンスのために特に良いと思う）最初に<Link />を使用しようとしていると思います

91
Cagri Yardimci