Нажатие на историю выдает пустую страницу вместо запрашиваемой страницы

#reactjs #react-router

#reactjs #реагировать-маршрутизатор

Вопрос:

Я работаю над своим маленьким приложением React. В какой-то момент мне нужно нажать на историю, чтобы открыть новую страницу (ну, на самом деле, ввод параметров в URL).

Однако, когда я нажимаю на историю, я натыкаюсь на пустую страницу, которая не является тем, что я хочу (очевидно).

Я попытался найти, в чем может быть проблема, но я ничего не нашел.

Вот код моего маршрутизатора и нажатие.

 onClick={() => {
            this.props.history.push({
              pathname: this.props.history.location.pathname
            });
          }}
  
 export default function EnglishComparators () {
  const { i18n } = useTranslation();

  i18n.changeLanguage('en');

  return (
    <Switch>
      <Route exact path="/checking-accounts" component={CheckingComparator} />
      <Route exact path="/savings-accounts" component={SavingsComparator} />
      <Route exact path="/gic-accounts" component={GICComparator} />
      <Route exact path="/robo-advisors" component={RoboAdvisorsComparator} />
      <Route exact path="/brokerage-accounts" component={BrokersComparator} />
      <Route exact path="/credit-cards" component={CreditCardsComparator} />
      <Route path="/" component={FrenchComparators} />
    </Switch>
  );
}


export default function FrenchComparators () {
  const { i18n } = useTranslation();

  i18n.changeLanguage('fr');

  return (
    <Switch>
      <Route exact path="/comptes-chèque" component={CheckingComparator} />
      <Route exact path="/comptes-épargnes" component={SavingsComparator} />
      <Route exact path="/comptes-cpg" component={GICComparator} />
      <Route exact path="/robot-conseillers" component={RoboAdvisorsComparator} />
      <Route exact path="/courtiers-en-ligne" component={BrokersComparator} />
      <Route exact path="/cartes-de-crédit" component={CreditCardsComparator} />
    </Switch>
  );
}
  

Ответ №1:

Я допустил ошибку в своем предыдущем ответе, и я немного углубился в проблему.

Я создал эту изолированную среду для имитации того же подхода, что и вы.

https://codesandbox.io/s/simple-example-using-react-router-2yovb?file=/src/App.js

Я не знаю, имеет ли смысл push просматривать историю с pathname: this.props.history.location.pathname раз, когда вы получаете то же местоположение, что и пользователь.

Комментарии:

1. Тем не менее, я попробовал это в своем приложении с вашим кодом, и это не сработало… Я не понимаю, почему.

2. Трудно сказать, в чем проблема, не проверив полный блок приложения. Попробуйте проверить, есть ли у вас правильная структура, необходимая react-router . И обратите внимание, чтобы дерево компонентов использовало хуки, как я сделал в примере.