react 实现路由守卫

React 中实现路由守卫可以使用 React Router 提供的 `Route` 组件和 `Redirect` 组件。

首先，我们需要在路由配置中定义需要守卫的路由。例如，我们定义一个需要登录才能访问的路由：

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

function PrivateRoute({ component: Component, isAuthenticated, ...rest }) {
  return (
    <Route
      {...rest}
      render={(props) =>
        isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
        )
      }
    />
  );
}

function App() {
  const isAuthenticated = false; // 假设当前用户未登录
  return (
    <Router>
      <Switch>
        {/* 公共路由 */}
        <Route path="/login" component={Login} />

        {/* 需要守卫的私有路由 */}
        <PrivateRoute path="/dashboard" component={Dashboard} isAuthenticated={isAuthenticated} />

        {/* 404 页面 */}
        <Route component={NotFound} />
      </Switch>
    </Router>
  );
}

在上面的代码中，我们定义了一个 `PrivateRoute` 组件，它接收一个 `component` 属性和一个 `isAuthenticated` 属性。`component` 属性表示需要守卫的组件，`isAuthenticated` 属性表示当前用户是否已登录。如果用户已登录，则渲染 `component` 组件；否则，重定向到登录页。通过 `Redirect` 组件的 `to` 属性指定重定向到 `/login` 路由，并且将当前路由的路径传递给登录页，方便登录成功后跳转回来。

最后，在路由配置中使用 `PrivateRoute` 组件来守卫需要登录才能访问的路由。如果用户未登录，则会被重定向到登录页。

以上就是 React 中实现路由守卫的方法。