react-router4.2：三种js控制路由跳转的方法

本文档主要介绍了如何在React Router 4.2版本中使用JavaScript控制路由跳转，尤其是在用户需要登录后才能访问特定内容的场景下。React Router 是React.js开发中常用的库，用于创建单页应用（SPA）中的导航管理。在之前的版本中，开发者可以通过Link标签或在子组件中直接操作`this.props.history.push('/某路径')`来实现路由切换。然而，到了4.2版本，这种做法不再被官方支持。 首先，我们回顾一下基本的React Router 4.2配置，包括BrowserRouter组件的使用，以及Route和Switch组件来组织不同的路由规则： ```jsx import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; <Router> <div style={{ height: '100%' }}> <Switch> <Route exact path="/" component={LoginPage} /> <Route path="/chat" component={Chat} /> <Route path="/home" component={Home} /> <Route path="/login" component={Login} /> </Switch> </div> </Router> ``` 在React Router 4.2中，如果想要在登录成功后动态地跳转到其他页面，不能直接使用传统的`push`方法。为了解决这个问题，文档推荐使用`Redirect`标签或组件，具体操作如下： 1. 引入Redirect组件： ```jsx import { Redirect } from 'react-router'; ``` 2. 在`Login`组件的渲染方法中，检查登录状态。如果登录成功，使用Redirect进行跳转： ```jsx class Login extends React.Component { render() { const { isRegisterNewUser, loginSuccess } = this.props; // ...其他代码 if (loginSuccess) { return ( <Redirect to='/chat' /> {/* 或者 '/home'、'/other-page'等其他路由 */} ); } // ...登录失败或未登录的逻辑 } } ``` 总结来说，React Router 4.2为了安全性和更好的组件化，限制了直接在子组件中操作路由。开发者需要借助官方提供的`Redirect`组件来实现动态路由跳转。这确保了路由管理的灵活性和组件间的清晰职责划分，有助于维护SPA应用的健壮性和可维护性。