ログインステータスに基づいて React Router をプログラムでナビゲートするにはどうすればよいですか?

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

Web アプリケーションを作成する場合、特定の条件に基づいてルートを変更することが必要になることがよくあります。この特定のシナリオの目標は、ユーザーがログインしているかどうかに応じてルートを動的に変更することです。

withRouter とhistory.push を使用した解決策

React Router v4 の場合、1 つのアプローチは次のとおりです。 withRouter でコンポーネントをラップし、history.push プロパティを利用してプログラムで移動します。これは、コンポーネントがルーターに直接接続されていない場合に推奨されます。

import { withRouter } from 'react-router';

class App extends React.Component {
  componentDidMount() {
    if (isLoggedIn) {
      this.props.history.push('/home');
    }
  }
  render() {
    return <Login />;
  }
}
export default withRouter(App);

リダイレクトを使用した解決策

別の方法は、リダイレクト コンポーネントを利用することです。このオプションは、条件に基づいて特定のパスに即座にリダイレクトすることで機能します。

import { withRouter } from 'react-router';

class App extends React.Component {
  render() {
    if (isLoggedIn) {
      return <Redirect to="/home" />;
    }
    return <Login />;
  }
}
export default withRouter(App);

React Router v2 または v3 のソリューション

React Router v2 または v3 の場合、コンテキストを使用して動的にルートを変更します:

class App extends React.Component {
  render() {
    if (isLoggedIn) {
      this.context.router.push('/home');
    }
    return <Login />;
  }
}
App.contextTypes = {
  router: React.PropTypes.object.isRequired
};
export default App;

React Router の追加ソリューションv3

さらに、React Router v3 の場合、browserHistory モジュールをインポートしてプログラムによるナビゲーションを実現できます。

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

これらのソリューションを実装することで、特定の条件に基づいて React Router 内を動的に移動できます。また、正しいコンポーネントが確実に読み込まれて表示されるようにすることで、ユーザー エクスペリエンスを向上させます。

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