React Router v5.1.2公共和受保护的身份验证和基于角色的路由

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

// 公共路由
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />

// 其他受保护的路由
<Switch>
  <PrivateRoute path="/dashboard" component={Dashboard} />
  <PrivateRoute path="/profile" component={Profile} />
</Switch>

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

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

const PrivateRoute = ({ component: Component, roles, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      isAuthenticated && roles.includes(user.role) ? (
        <Component {...props} />
      ) : (
        <Redirect to="/unauthorized" />
      )
    }
  />
);

// 使用基于角色的路由
<PrivateRoute
  path="/admin"
  component={AdminPanel}
  roles={['admin']}
/>
<PrivateRoute
  path="/user"
  component={UserPanel}
  roles={['user']}
/>