使用 Redux 身份验证响应路由器 onEnter

Question

我正在尝试使用 react-router-dom 中路由器的 onEnter 来验证用户是否已通过身份验证。我将身份验证保留在登录减速器中。

初始状态：

const initialState = {
    logged: false,
    userName: null
}

在我的 App.js 中有我的路由器

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

function App() {
  const login = useSelector((state) => state.login);

  const requireAuth = (nextState, replace, next) => {
      console.log(login)
    if(!login.logged) {
      replace({
        pathname: "/login",
        state: {nextPathname: nextState.location.pathname}
      });
    }
    next();
  }

  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} onEnter={requireAuth} />
        <Route exact path="/login" component={Login} />
      </Switch>
    </Router>
  )
}

export default App;

它没有重定向到 /login。实际上，它没有调用 requireAuth 函数，因为浏览器没有显示我在函数内部的日志。我在路由器设置中缺少什么？ 顺便说一句，在导航到页面之前检查用户是否通过身份验证是否合适？

谢谢

使用 PrivateRoute 更新代码。错误：Error: Maximum update depth exceeded.

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

function App() {
  
  const PrivateRoute = ({ children, ...rest }) => {
    const login = useSelector((state) => state.login);
      console.log(login);
    return (
      <Route
        {...rest}
        render={({ location }) =>
          login.logged ? (
            children
          ) : (
            <Redirect
              to={{
                pathname: "/login",
                state: { from: location }
              }}
            />
          )
        }
      />
    );
  }

  return (
    <Router>
      <Switch>
        <PrivateRoute path="/">
          <Home />
        </PrivateRoute>
        <Route path="/login">
          <Login />
        </Route>
      </Switch>
    </Router>
  )
}

export default App;