#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
. И обратите внимание, чтобы дерево компонентов использовало хуки, как я сделал в примере.