如何以程式設計方式在 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></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></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"></redirect> : <login></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中文網其他相關文章！