當我將它分離到另一個組件中時，React-router重定向似乎不起作用

Question

我試圖在我的React應用程序中設置PrivateRoute組件，但是當我將重定向分離到另一個文件中時，如果Auth為假，它似乎不會重定向-它只是掛在管理頁面上，沒有加載任何組件。

當我在App.js中擁有PrivateRoute函數時，該組件可以正常工作，但是當我將其分離到一個新文件中時，react-routers重定向似乎不起作用

這是函數：

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";

應該解決這個問題。