React router: функция userHistory pu sh не работает должным образом - PullRequest
Новая
       19

React router: функция userHistory pu sh не работает должным образом

1 голос
/ 14 марта 2020

Я пытаюсь изменить URL-адрес браузера и отобразить нужный компонент в зависимости от некоторых условий. однако после успешного входа в систему я могу изменить URL-адрес и перейти на страницу пользователя / home, но когда я пытаюсь изменить URL-адрес при нажатии кнопки, он попадает в URL-адрес / account и снова меняется на / 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, URL-адрес изменяется в / account и переключается обратно в / home. Не могли бы вы, ребята, предложить какую-нибудь идею.

1 Ответ

2 голосов
/ 14 марта 2020

Похоже, у вас есть планировщик. 

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

Приведенный выше код сбрасывает URL-адрес на /home каждые 300 мс (0,3 с), независимо от того, где вы go.

setTimeOut и setIntervals никогда не используются для маршрутизации. так что не надо.

Еще несколько лучших практик - избегать использования history.replace() и использования history.push(). Не стоит менять стек истории маршрутов.

Также, когда вы используете <Switch>, нет необходимости использовать exact везде. Они просто альтернативы друг другу при разных обстоятельствах.

...