react-router-dom路由守卫

React Router Dom提供了一种路由守卫的机制，可以用来控制页面的访问权限。你可以使用`<Route>`组件的`render`属性或者`component`属性来定义守卫函数。

一种常见的方式是使用`render`属性来定义守卫函数，比如：

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

// 定义守卫函数
const PrivateRoute = ({ component: Component, ...rest }) => {
  const isAuthenticated = // 判断用户是否已登录的逻辑

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

// 在路由配置中使用守卫
const App = () => {
  return (
    <Router>
      <Route path="/login" component={Login} />
      <PrivateRoute path="/protected" component={ProtectedPage} />
    </Router>
  );
};

// 定义被保护的页面组件
const ProtectedPage = () => {
  return <h1>This is a protected page.</h1>;
};

// 定义登录页面组件
const Login = () => {
  return <h1>Please login.</h1>;
};

在上面的例子中，`PrivateRoute`是一个守卫函数，它接收一个组件和其他属性作为参数。在守卫函数中，我们可以根据需要定义判断用户是否已经登录的逻辑。如果用户已经登录，则渲染`<Component>`，否则将用户重定向到登录页面。

在路由配置中，我们可以使用`<Route>`来定义需要守卫的路由。对于需要进行权限控制的路由，我们使用`PrivateRoute`组件代替`Route`组件来定义。这样，在访问受保护的页面时，会先进入守卫函数进行权限判断，然后再决定是否渲染对应的组件。

这只是一种基本的路由守卫实现方式，你可以根据具体的需求进行自定义和扩展。