如何在 React Router 中以编程方式导航？

使用 React-Router 以编程方式导航

问题：

在 React 应用程序中，您需要根据条件以编程方式更改路线（例如，检查用户是否已登录）。但是，您无法直接在渲染函数中修改状态。

解决方案：

要实现此目的，可以采用多种策略，具体取决于版本正在使用的 React-Router：

React-Router v4:

• 使用 withRouter 高阶组件 (HOC) 来包装目标组件。
• 在组件的 componentDidMount 或 componentWillReceiveProps 生命周期方法中使用 History.push 方法导航到不同的

React-Router v2 或 v3:

• 使用 React 的上下文访问路由器并使用 context.router 以编程方式更改路由。 push.
• 从react-router导入browserHistory并使用browserHistory.push

实现：

使用 withRouter (React-Router v4)：

import { withRouter } from 'react-router';

class App extends React.Component {
  componentDidMount() {
    // Check if the user is logged in
    if (isLoggedIn) {
      // Navigate to the home page using history.push
      this.props.history.push('/home');
    }
  }

  render() {
    // Display the login component if the user is not logged in
    return <Login />;
  }
}

export default withRouter(App);

使用重定向 (React-Router) v4):

class App extends React.Component {
  render() {
    if (isLoggedIn) {
      // Redirect to the home page using <Redirect>
      return <Redirect to="/home" />;
    }
    // Display the login component if the user is not logged in
    return <Login />;
  }
}

以上是如何在 React Router 中以编程方式导航？的详细内容。更多信息请关注PHP中文网其他相关文章！