React 路由器：userHistory 推送功能未按预期工作

Posted 2023-02-21

【中文标题】React 路由器：userHistory 推送功能未按预期工作

【英文标题】：React router: userHistory push function is not working as expected

【发布时间】：2020-06-26 00:33:07

【问题描述】：

我正在尝试更改浏览器 URL 并根据某些条件呈现所需的组件。但是，我可以在成功登录后更改 URL 并将用户登陆到 /home 页面，但是当我尝试在按钮单击时更改 URL 时，它会点击 /accounts URL 并再次更改为 /home。

App.js

  <Route exact path="/accounts" component=Accounts />
  <Route exact path="/home" component=Home />
  <Route exact path="/" component=Login />
</Switch>

从组件 A 成功登录后，我正在执行下面的一段代码，该代码呈现家庭组件

 setInterval(() => 
            history.push("/home")
          , 300);

一旦用户在 /home 中执行按钮单击，我将在下面执行一段代码以更改 url 并呈现帐户组件。

 function showAccountsTransactions () 
        history.replace("/accounts")
    

  return (
        <div className=classes.root>
<Fab onClick=showAccountsTransactions>
                 Show Account and Transactions
        </Fab>
 </div>

但我可以看到 onClick，网址正在更改为 /accounts 并切换回 /home。各位大侠能不能给点意见。

【参考方案1】：

看来您已经为自己准备了一个调度程序。

 setInterval(() => 
            history.push("/home")
          , 300);

上面的代码每 300 毫秒（0.3 秒）将 URL 重置为 /home，无论您走到哪里。

setTimeOut 和 setIntervals 永远不会用于路由。所以不要。

还有一些最佳做法是避免使用history.replace()，而改用history.push()。更改路线的历史堆栈不是一个正确的想法。

同样当你使用<Switch> 时，没有必要在任何地方都使用exact。它们只是在不同情况下的替代品。

【讨论】：

感谢精彩的解释。我没有注意到那个愚蠢的错误。我已经按照您的建议进行了所有更改，并且效果很好