如果使用 history.push 访问特定路由，React-Router v5 不会重定向

Question

在我的反应应用程序中，我有 /lead-manager 路线，/login 路线 还有/ 路由，后者是app.js 本身，我不希望任何人访问，如果有人只是去/ 路由，我希望他们重定向到/lead-manager 路由。 所以这就是我根据给出的解决方案所做的 here。

我的 app.jsx 部分

import {
  BrowserRouter as Switch,
  useHistory,
  Route,
  useLocation,
} from "react-router-dom";

const App = ({ confirmAuthentication }) => {
  let location = useLocation();
  let history = useHistory();

  useEffect(() => {
    async function fetchIt() {
      if (localStorage.jwt !== undefined) {
        confirmAuthentication();
      }
    }
    fetchIt();
    if (location.pathname === "/") {
      history.push("lead-manager");
    }
  }, []);
 return (
    <div>
      <Switch>
        <Route exact path="/testing">
          <TestingComponent />
        </Route>
        <PrivateRoute path="/lead-manager" component={LeadApp} />
        <Route exact path="/login">
          <LoginView />
        </Route>
      </Switch>
    </div>
  );
}

访问/ 路径时得到的输出是URL 中的/lead-manager。哪个是期望的，但该组件不会与/lead-manager 路由中定义的组件相应地呈现。它只是停留在/ 路由上，即使 URL 显示 /lead-manager

希望这很清楚

Answer 1

为了正确使用历史记录，您需要在层次结构中将应用程序组件包装起来的路由器。由于您在 App 组件中渲染路由器，因此它无法监听历史更改，因为 useHistory 提供的历史不引用路由器使用的历史，除非 App 组件被路由器包装。

不要在 App 组件内渲染路由器

此外，您已将 Router 渲染为 App 组件中的 Switch 组件，您必须改为从 react-router-dom 导入确切的 Switch 组件

检查下面的更新代码

import {


    BrowserRouter as Router,
      Switch
      useHistory,
      Route,
      useLocation,
    } from "react-router-dom";

    const App = ({ confirmAuthentication }) => {
      let location = useLocation();
      let history = useHistory();

      useEffect(() => {
        async function fetchIt() {
          if (localStorage.jwt !== undefined) {
            confirmAuthentication();
          }
        }
        fetchIt();
        if (location.pathname === "/") {
          history.push("lead-manager");
        }
      }, []);
     return (
        <div>
          <Switch>
            <Route exact path="/testing">
              <TestingComponent />
            </Route>
            <PrivateRoute path="/lead-manager" component={LeadApp} />
            <Route exact path="/login">
              <LoginView />
            </Route>
          </Switch>
        </div>
      );
    }

    export default (props) => <Router><App {...props}/></Router>