React的路由守卫如何做

React 路由守卫可以通过 React Router 提供的高阶组件 `withRouter()` 和 `Route` 组件的 `render` 属性来实现。

首先，使用 `withRouter()` 包裹需要进行路由守卫的组件，以便可以通过 `props` 获取到 `history`、`location` 和 `match` 等路由相关的信息。

然后，在需要进行路由守卫的路由组件上，通过 `Route` 组件的 `render` 属性来指定要渲染的组件，如果需要进行路由守卫，则在 `render` 方法中进行相应的处理，比如判断用户是否已经登录，如果没有登录则跳转到登录页面。

下面是一个简单的例子：

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

// 需要进行路由守卫的组件
function PrivateRoute(props) {
  const { component: Component, ...rest } = props;
  const isLoggedIn = checkIfUserIsLoggedIn(); // 判断用户是否已经登录
  return (
    <Route
      {...rest}
      render={props =>
        isLoggedIn ? (
          <Component {...props} />
        ) : (
          <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
        )
      }
    />
  );
}

// 在需要进行路由守卫的路由组件上使用 PrivateRoute 组件
function App() {
  return (
    <Router>
      <Switch>
        <Route path="/login" component={Login} />
        <PrivateRoute path="/dashboard" component={Dashboard} />
      </Switch>
    </Router>
  );
}

export default withRouter(PrivateRoute);

在上面的例子中，`PrivateRoute` 组件是一个需要进行路由守卫的组件，它通过 `render` 方法来判断用户是否已经登录，如果已经登录则渲染指定的组件，否则跳转到登录页面。

在 `App` 组件中，我们使用 `PrivateRoute` 组件来保护 `Dashboard` 组件的访问，只有在用户已经登录的情况下才可以访问 `Dashboard` 组件。