推送到历史记录将显示空白页面，而不是查询页面

如何解决推送到历史记录将显示空白页面，而不是查询页面

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

解决方法

我在上一个答案中犯了一个错误，我对这个问题有些了解。

我创建了这个沙箱来模拟您正在使用的相同方法。

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

我不知道一旦获得与用户相同的位置，就用Array<{value:string,label:string}>来push的历史记录是否有意义。