当我将它分成另一个组件时，React-router Redirect 似乎不起作用答案

【问题标题】：React-router Redirect does not seem to work when I separate it into another component当我将它分成另一个组件时，React-router Redirect 似乎不起作用
【发布时间】：2019-08-30 14:09:57
【问题描述】：

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

当我的 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 中，但我不明白为什么它不起作用？

【问题讨论】：

这两个函数是否在同一个文件中？
不，但是当我将它们添加到同一个文件中时它可以工作 - 我只是好奇为什么当我将它们分开时它们不工作？
你能不能也把你的导入导出PrivateRoute组件贴出来。

标签： javascript reactjs react-router

【解决方案1】：

我认为导入BrowserRouter as Redirect 和使用<Redirect to= 不起作用，因为BrowserRouter 组件的目的完全不同，不要指望to 道具。将导入更改为

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

应该解决问题。

【讨论】：