推送到历史记录会显示一个空白页面，而不是查询的页面

Question

我正在开发我的小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>
);
}

Answer 1

我在之前的回答中犯了一个错误，我对这个问题有点深入。

我创建这个沙箱是为了模拟你正在做的相同方法。

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

我不知道push和pathname: this.props.history.location.pathname的历史是否有意义，一旦你得到了与用户相同的位置。