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

Posted 2023-03-16

【中文标题】如果使用 history.push 访问特定路由，React-Router v5 不会重定向

【英文标题】：React-Router v5 not redirecting if accessing specific route using history.push

【发布时间】：2020-08-23 16:03:30

【问题描述】：

在我的反应应用程序中，我有 /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

希望这很清楚

【问题讨论】：

你是如何定义使用过的路由器的，它是否在 App 组件中呈现？

我现在更新了我的查询@ShubhamKhatri

你的控制台有什么错误吗？

@Panther 控制台没有错误

我认为你必须推 /lead-manager 而不是 lead-manager !!

【参考方案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>  

【讨论】：

@Subham Khatri。非常感谢有效。感谢清晰的解释R+