react怎么做路由拦截
时间: 2024-05-17 21:09:45 浏览: 16
在React中,可以使用第三方库来实现路由拦截,比如react-router-dom。使用该库的withRouter高阶组件可以获取到路由相关的信息,并对路由进行拦截。
具体实现方法如下:
1. 导入withRouter和Route组件:
```javascript
import { withRouter, Route } from 'react-router-dom';
```
2. 创建一个私有路由组件PrivateRoute,用于判断是否需要拦截:
```javascript
const PrivateRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={(props) => (
isLogin() // 判断是否登录
? <Component {...props} />
: <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
)} />
);
```
3. 将需要拦截的路由替换为PrivateRoute组件:
```javascript
<Switch>
<Route exact path="/" component={Home} />
<PrivateRoute path="/dashboard" component={Dashboard} />
<Route path="/login" component={Login} />
<Route component={NotFound} />
</Switch>
```
4. 在拦截前进行登录状态的判断,这里可以使用localStorage来存储登录状态:
```javascript
const isLogin = () => {
return localStorage.getItem('login') === 'true';
};
```