React Router v2、v3、v4 をプログラムでナビゲートするにはどうすればよいですか?

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

多くの React アプリケーションでは、ユーザー認証などの特定の条件に基づいてルート間をプログラム的に移動する必要があるシナリオが存在する場合があります。 。これは、react-router を使用してこれを実現する方法です。

react-router v4

react-router v4 では、withRouter 上位コンポーネント (HOC) を使用して履歴プロパティにアクセスできます。プログラムでルートを変更するための Push() も含まれます。これを例で実装する方法は次のとおりです。

import { withRouter } from 'react-router';

class App extends React.Component {
  componentDidMount() {
    const isLoggedIn = // Get isLoggedIn from localStorage or API call

    if (isLoggedIn) {
      this.props.history.push('/home');
    }
  }

  render() {
    // Return login component
    return <Login />;
  }
}

export default withRouter(App);

react-router v2 または v3

react-router の以前のバージョン (v2 および v3) では、コンテキストを使用して変更できます。次の例に示すようにルート:

import React, { Component } from 'react';
import { Router, Route, Link, browserHistory } from 'react-router';

class App extends React.Component {
  static contextTypes = {
    router: React.PropTypes.object.isRequired,
  };

  render() {
    if (isLoggedIn) {
      this.context.router.push('/home');
    }
    // Return login component
    return <Login />;
  }
}
export default App;

react-router を使用した代替アプローチv4

さらに、react-router v4 は、プログラムで移動するための代替方法を提供します:

• リダイレクト: リダイレクト コンポーネントを使用して、条件に基づいてユーザーをリダイレクトできます。以下に見られるように例:

import { BrowserRouter as Router, Redirect } from 'react-router-dom';

function App() {
  const isLoggedIn = // Get isLoggedIn from localStorage or API call

  return (
    <Router>
      {isLoggedIn ? <Redirect to='/home' /> : <Login />}
    </Router>
  );
}
export default App;

• browserHistory.push(): に示すように、browserHistory.push() メソッドを直接使用して、プログラムによってルートを変更することもできます。次の例:

import { browserHistory } from 'react-router';

componentDidMount() {
  const isLoggedIn = // Get isLoggedIn from localStorage or API call

  if (isLoggedIn) {
    browserHistory.push('/home');
  }
}

最適なアプローチであることに留意してください。アプリケーションの要件は、特定の要件とコードベースによって異なる場合があります。

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