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

Question

我正在尝试更改浏览器 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，url 正在更改为 /accounts 并切换回 /home。你们能不能给些建议。

Answer 1

看来你已经有了一个调度器。

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

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

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

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

另外当你使用<Switch>时，没有必要到处使用exact。在不同的情况下，它们只是彼此的替代品。

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

React router: userHistory push function is not working as expected

browser-history

reactjs

react-router

react-native