当我将它分成另一个组件时，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&nbsp;{&nbsp;BrowserRouter&nbsp;as&nbsp;Router,&nbsp;Redirect,&nbsp;Route&nbsp;}&nbsp;from&nbsp;"react-router-dom";应该解决这个问题。