创建Web应用程序时，通常需要根据某些条件更改路线。在这个特定场景中，目标是根据用户是否登录动态更改路由。
对于 React Router v4，一种方法是使用 withRouter 包装组件并利用 History.push 属性以编程方式导航。当组件未直接连接到路由器时，建议这样做。
import { withRouter } from 'react-router';
class App extends React.Component {
componentDidMount() {
if (isLoggedIn) {
this.props.history.push('/home');
}
}
render() {
return <Login />;
}
}
export default withRouter(App);另一种方法是利用重定向组件。此选项的工作原理是根据条件立即重定向到特定路径。
import { withRouter } from 'react-router';
class App extends React.Component {
render() {
if (isLoggedIn) {
return <Redirect to="/home" />;
}
return <Login />;
}
}
export default withRouter(App);对于 React Router v2 或 v3，上下文可用于动态地更改路由：
class App extends React.Component {
render() {
if (isLoggedIn) {
this.context.router.push('/home');
}
return <Login />;
}
}
App.contextTypes = {
router: React.PropTypes.object.isRequired
};
export default App;此外，对于React Router v3，可以导入browserHistory模块来实现编程式导航：
import { browserHistory } from 'react-router';
browserHistory.push('/some/path');通过实现这些解决方案，您可以根据特定条件在React Router中动态导航并通过确保加载和显示正确的组件来增强用户体验。
以上是如何根据登录状态在 React Router 中以编程方式导航？的详细内容。更多信息请关注PHP中文网其他相关文章！
