如何以编程方式在 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中文网其他相关文章！