レンダー関数を変更せずに React Router をプログラムでナビゲートするにはどうすればよいですか?

React-Router を使用したプログラムによるナビゲーション

課題:

React アプリケーションで、プログラムによってユーザーのログインステータスに基づいて異なるルートを設定します。 render 関数を変更せずにこれを実現する方法がわかりません。

React-Router v4 の解決策:

履歴オブジェクトの使用:

コンポーネントを withRouter でラップし、history.push メソッドを利用します。小道具。このアプローチは、コンポーネントがルーティング プロパティを受け入れる場合、またはコンポーネントが Router に直接リンクされていない場合に役立ちます。

import { withRouter } from 'react-router';

class App extends React.Component {
...
componentDidMount() {
// Check user login status
if (isLoggedIn) {
// Redirect to home route
this.props.history.push('/home');
}
}
render() {
// Render login component
return <Login />;
}
}

export default withRouter(App);

リダイレクトの使用:

より単純なシナリオでは、次のことができます。リダイレクトを使用します。

import { withRouter } from 'react-router';

class App extends React.Component {
...
render() {
// If user is logged in, redirect to home route
if (isLoggedIn) {
return <Redirect to="/home" />;
}
// Render login component
return <Login />;
}
}

の解決策React-Router v2/v3:

ルーター コンテキストの使用:

コンポーネントをラップし、ルーター コンテキストにアクセスしてルートを動的に変更します。

import React from 'react';

class App extends React.Component {
...
render() {
// Check user login status
if (isLoggedIn) {
// Change route using router context
this.context.router.push('/home');
}
// Render login component
return <Login />;
}
}

App.contextTypes = {
router: React.PropTypes.object.isRequired
};
export default App;

ブラウザの使用履歴:

ブラウザ履歴に直接アクセスすると、ナビゲーションをトリガーすることもできます。

import { browserHistory } from 'react-router';

// Redirect to specific path
browserHistory.push('/some/path');

以上がレンダー関数を変更せずに React Router をプログラムでナビゲートするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。