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

Question

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

我的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 组件的路由器。由于您在 App 组件中渲染 Router，它无法监听历史变化，因为 useHistory 提供的历史不引用 Router 使用的历史，除非 App 组件被 Router 包装。

不在 App 组件内部渲染 Router

此外，您已将 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>

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

React-Router v5 not redirecting if accessing specific route using history.push

reactjs

react-router

react-functional-component