时间戳

首页 > 解决方案 > React 路由器：userHistory 推送功能未按预期工作

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

问题描述

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

应用程序.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。各位大侠能不能给点思路。

标签： reactjsreact-nativereact-routerbrowser-history

解决方案

看起来你有一个调度程序。

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

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

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

还有一些最佳实践是避免使用history.replace()和使用history.push()。更改路线的历史堆栈不是一个正确的主意。

此外，当您使用时<Switch>，无需exact到处使用。在不同的情况下，它们只是彼此的替代品。

推荐阅读