React怎么实现路由守卫

在 React 中，我们可以使用 React Router 库来实现路由守卫。

React Router 提供了一个名为 `Route` 的组件，可以用来渲染特定的路由。我们可以在 `Route` 组件上使用 `render` 属性来渲染需要展示的组件。同时，`Route` 还提供了 `component` 和 `children` 两个属性来渲染组件。

在路由守卫中，我们可以在 `render` 属性中编写条件判断逻辑，根据条件渲染不同的组件。例如，我们可以在 `render` 属性中使用 `Redirect` 组件将用户重定向到登录页面。

下面是一个简单的路由守卫示例：

import React from 'react';
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 } }} />
        )
      }
    />
  );
}

export default PrivateRoute;

在上面的代码中，我们定义了一个名为 `PrivateRoute` 的组件，用于实现路由守卫。该组件接收三个属性：`component`、`isAuthenticated` 和 `rest`。其中，`component` 属性是需要渲染的组件，`isAuthenticated` 属性表示用户是否已登录，`rest` 属性包含其他需要传递给 `Route` 组件的属性。

在 `render` 属性中，我们首先判断用户是否已登录。如果已登录，则渲染需要展示的组件；否则，使用 `Redirect` 组件将用户重定向到登录页面，并通过 `state` 属性记录用户当前所在的页面路径，以便登录后自动跳转到该页面。

最后，我们将 `PrivateRoute` 组件作为 `Route` 组件的子组件使用即可。例如：

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

function App() {
  const isAuthenticated = true; // 判断用户是否已登录

  return (
    <Router>
      <Switch>
        <Route exact path="/login" component={Login} />
        <<PrivateRoute isAuthenticated={isAuthenticated} exact path="/" component={Home} />
      </Switch>
    </Router>
  );
}

export default App;

在上面的代码中，我们使用 `PrivateRoute` 组件来保护 `Home` 组件，只有在用户已登录的情况下才能访问。