react路由怎么做劫持
时间: 2023-08-31 07:05:16 浏览: 42
React 路由可以通过使用高阶组件来实现劫持。你可以创建一个高阶组件来包装需要劫持的组件,并在该高阶组件中进行路由劫持操作。
下面是一个简单的示例代码:
```javascript
import React from 'react';
import { Route, Redirect } from 'react-router-dom';
const PrivateRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={(props) => (
localStorage.getItem('auth_token')
? <Component {...props} />
: <Redirect to='/login' />
)} />
);
export default PrivateRoute;
```
在上面的代码中,我们创建了一个名为 `PrivateRoute` 的高阶组件,该组件接受一个 `component` 参数和其他所有参数,并返回一个 `Route` 组件。在这个 `Route` 组件中,我们使用 `render` 属性来渲染组件。如果用户已经登录(即 `auth_token` 存在于本地存储中),那么就渲染传入的组件。否则,就重定向到 `/login` 页面。
你可以使用这个 `PrivateRoute` 组件来包装需要进行路由劫持的组件,例如:
```javascript
<Switch>
<PrivateRoute exact path='/dashboard' component={Dashboard} />
<Route exact path='/login' component={Login} />
</Switch>
```
在上面的代码中,我们使用 `PrivateRoute` 组件来包装 `Dashboard` 组件,当用户未登录时,访问 `/dashboard` 路径时会重定向到 `/login` 页面。
当然,这只是一个简单的示例,你可以根据自己的需求来实现更复杂的路由劫持操作。