最简单的react 路由守卫完整代码
时间: 2023-09-16 08:10:29 浏览: 39
以下是一个简单的 React 路由守卫的完整代码示例:
```javascript
import React from 'react';
import { Route, Redirect } from 'react-router-dom';
const PrivateRoute = ({ component: Component, isAuthenticated, ...rest }) => (
<Route
{...rest}
render={(props) =>
isAuthenticated ? (
<Component {...props} />
) : (
<Redirect to={{ pathname: '/login', state: { from: props.location } }} />
)
}
/>
);
export default PrivateRoute;
```
这个 `PrivateRoute` 组件接收一个 `component` 属性和一个 `isAuthenticated` 属性,如果用户已经认证则渲染传入的 `component`,否则将用户重定向到登录页面。使用该组件时,只需要将需要保护的路由包装在 `PrivateRoute` 组件中即可。例如:
```javascript
<PrivateRoute path="/dashboard" component={Dashboard} isAuthenticated={isAuthenticated} />
```
其中 `isAuthenticated` 是一个布尔值,表示当前用户是否已经认证。如果用户已经认证,则渲染 `Dashboard` 组件,否则将用户重定向到登录页面。