如何在不修改渲染函数的情况下以编程方式在 React Router 中导航？

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

挑战：

在你的 React 应用程序中，你想要以编程方式导航到根据用户登录状态不同的路线。您不确定如何在不改变渲染函数的情况下实现此目的。

React-Router v4 的解决方案：

使用历史对象：

用 withRouter 包装你的组件并利用 props 中的 History.push 方法。当您的组件接受路由属性或未直接链接到路由器时，此方法非常有用。

import { withRouter } from 'react-router';

class App extends React.Component {
...
componentDidMount() {
// Check user login status
if (isLoggedIn) {
// Redirect to home route
this.props.history.push('/home');
}
}
render() {
// Render login component
return <Login />;
}
}

export default withRouter(App);

使用重定向：

对于更简单的场景，您可以使用 Redirect。

import { withRouter } from 'react-router';

class App extends React.Component {
...
render() {
// If user is logged in, redirect to home route
if (isLoggedIn) {
return <Redirect to="/home" />;
}
// Render login component
return <Login />;
}
}

React-Router 的解决方案v2/v3:

使用路由器上下文：

包装您的组件并访问路由器上下文以动态更改路由。

import React from 'react';

class App extends React.Component {
...
render() {
// Check user login status
if (isLoggedIn) {
// Change route using router context
this.context.router.push('/home');
}
// Render login component
return <Login />;
}
}

App.contextTypes = {
router: React.PropTypes.object.isRequired
};
export default App;

使用浏览器历史记录：

直接访问浏览器历史记录也可以触发导航。

import { browserHistory } from 'react-router';

// Redirect to specific path
browserHistory.push('/some/path');

以上是如何在不修改渲染函数的情况下以编程方式在 React Router 中导航？的详细内容。更多信息请关注PHP中文网其他相关文章！