javascript - 当我将 React-router Redirect 分离到另一个组件中时，它似乎不起作用

Question

我试图在我的 React 应用程序中设置一个 PrivateRoute 组件，但是当我将重定向分离到另一个文件中时，如果 Auth 为 false，它似乎不会重定向 - 它只是卡在管理页面上，没有加载任何组件。

当我的 App.js 中有 PrivateRoute 函数时，该组件工作正常，但是当我将其分离到新文件中时，react-routers Redirect 似乎不起作用

这是函数:

import React from 'react';
import { BrowserRouter as Redirect, Route } from "react-router-dom";
function PrivateRoute({component: Component, ...rest}) {
  const isAuth = false;
  return (
    <Route
      {...rest}
      render={props =>
        isAuth ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{
              pathname: "/login",
              state: { from: props.location }
            }}
          />
        )
      }
    />
  )
}
export default PrivateRoute;

这是我的路线列表

import React, {useState, useEffect} from 'react';
import { BrowserRouter as Router, Route, Redirect } from "react-router-dom";
import Home from './views/Home';
import Players from './views/Players';
import Stats from './views/Stats';
import Admin from './views/Admin';
import Nav from './components/Nav/Nav';
import SideNav from './components/SideNav/SideNav';
import Login from './views/Login';
import PrivateRoute from './components/PrivateRoute/PrivateRoute';
function App() {
  const [navState, setNavState] = useState(false);

  return (
    <Router>
      <div id="app" className="centurion-major-app d-flex">
        <main className="flex-1 main_container">
          <Route path="/" exact component={Home} />
          <Route path="/players/" component={Players} />
          <Route path="/stats/" component={Stats} />
          <Route path="/login/" component={Login} />
          <PrivateRoute path="/admin/" component={Admin} />
        </main>
      </div>
    </Router>
  );
}
export default App;

我知道我可以将 PrivateRoute 函数留在 App.js 中，但我不明白为什么它不起作用？

Answer 1

我想导入BrowserRouter as Redirect并使用 <Redirect to=不起作用 BrowserRouter组件用于完全不同的目的，不要期望 to支柱。将导入更改为

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

应该可以解决这个问题。