Question

在我的应用中，我有一些嵌套的路线，根据它们是法语还是英语，它们具有不同的名称。我所做的就是在路由器中有一条匹配/的路由，这是英文路由的开关。如果没有找到匹配的内容，那么它将查找法国路线。

但是，当其中一个组件发生输入更改时，我必须添加history.push。但是，当我尝试推动时，我的屏幕变为空白，好像该路线不存在一样。但是，当我刷新页面时，会看到请求的结果。

这是我的路由器。呈现的所有组件都具有带有路由器的HOC。

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import EnglishComparators from './routers/EnglishComparators';

function App () {
  return (
    <Router>
      <Switch>
        <Route path="/index">
          <div className="homepage-links">
            <Link to="/comptes-chèque">Comparateur Comptes Chèque</Link>
            <Link to="/checking-accounts">Checking Accounts Comparator</Link>
            <Link to="/comptes-épargnes">Comparateur Comptes Épargnes</Link>
            <Link to="/savings-accounts">Savings Accounts Comparator</Link>
            <Link to="/gic-accounts">GIC Accounts Comparator</Link>
            <Link to="/comptes-cpg">Comparateur Comptes cpg</Link>
            <Link to="/robot-conseillers">Comparateur Robot-conseillers</Link>
            <Link to="/robo-advisors">Robo-advisors Comparator</Link>
            <Link to="/courtiers-en-ligne">Comparateur Courtiers en Ligne</Link>
            <Link to="/brokerage-accounts">Brokers Comparator</Link>
            <Link to="/cartes-de-crédit">Comparateur Cartes de Crédit</Link>
            <Link to="/credit-cards">Credit Cards Comparator</Link>
          </div>
        </Route>
        <Route path="/" component={EnglishComparators} />
      </Switch>
    </Router>
  );
}

export default (App);

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import CheckingComparator from '../pages/CheckingComparator';
import SavingsComparator from '../pages/SavingsComparator';
import { useTranslation } from 'react-i18next';
import GICComparator from 'pages/GICComparator';
import RoboAdvisorsComparator from 'pages/RoboAdvisorsComparator';
import BrokersComparator from 'pages/BrokersComparator';
import FrenchComparators from './FrenchComparators';
import CreditCardsComparator from 'pages/CreditCardsComparator';

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

  i18n.changeLanguage('en');

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

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import CheckingComparator from '../pages/CheckingComparator';
import SavingsComparator from '../pages/SavingsComparator';
import { useTranslation } from 'react-i18next';
import GICComparator from 'pages/GICComparator';
import RoboAdvisorsComparator from 'pages/RoboAdvisorsComparator';
import BrokersComparator from 'pages/BrokersComparator';
import CreditCardsComparator from 'pages/CreditCardsComparator';

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

  i18n.changeLanguage('fr');

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

如何确保在历史记录推送时打开了正确的页面而不是空白屏幕？

编辑：显然，我收到错误信息'未捕获的错误：重新渲染过多。 React限制了渲染次数以防止无限循环。'

推送到历史记录在嵌套开关中不起作用（黑屏）

0 个答案: