最简单最简单的路由守卫 react

在React中，可以使用Route组件来定义路由，并使用Route组件的props来添加路由守卫。

最简单的路由守卫是通过在Route组件中使用render prop来定义的。例如，以下代码展示如何使用render prop来定义一个路由守卫：

import React from 'react';
import { Route, Redirect } from 'react-router-dom';

const PrivateRoute = ({ component: Component, isAuthenticated, ...rest }) => (
  <Route {...rest} render={(props) => (
    isAuthenticated === true
      ? <Component {...props} />
      : <Redirect to='/login' />
  )} />
);

export default PrivateRoute;

在上面的代码中，PrivateRoute组件是一个自定义的组件，它使用Route组件的render prop来定义路由守卫。PrivateRoute组件接受3个props：component、isAuthenticated和rest。component是要渲染的组件，isAuthenticated表示用户是否已经登录，rest包含所有其他未命名的props。

在路由守卫中，我们首先检查isAuthenticated的值。如果用户已经登录，我们就渲染component，否则我们就重定向到登录页面。

这是使用PrivateRoute组件的示例：

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import PrivateRoute from './PrivateRoute';
import Dashboard from './Dashboard';
import Login from './Login';

const App = () => (
  <Router>
    <Switch>
      <Route path='/login' component={Login} />
      <PrivateRoute path='/dashboard' component={Dashboard} isAuthenticated={true} />
    </Switch>
  </Router>
);

export default App;

在上面的代码中，我们在Switch组件中定义了两个路由：/login和/dashboard。/login路由渲染Login组件，/dashboard路由渲染Dashboard组件，但是只有当isAuthenticated为true时，才会渲染Dashboard组件。这就是路由守卫的作用。