React router Redirect не работает, когда маршрут идет от другого компонента

Question

Создавая маршруты в приложении, я заметил, что Redirect не работает, если компонент с маршрутами отображается раньше, я хочу знать почему.

const TestRoute = () => {
  return (
      <Route exact path="/d" component={D} />
  );
};

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={A} />
        <Route exact path="/b" component={B} />
        <Route exact path="/c" component={C} />
        <TestRoute />
        <Redirect to="/c" />
      </Switch>
    </Router>
  );
}

Если я удаляю TestRoute redirect works, я попробуйте добавить компонент Switch в TestRoute, но он тоже не работает.

https://codesandbox.io/s/react-router-switch-es8wt

Answer 1

Из react-router-dom документов только Route и Redirect являются действительными потомками компонента Switch.

НО

Вы можете использовать функцию для возврата большего количества маршрутов для визуализации.

const testRoute = () => <Route exact path="/d" component={D} />;

const RouterApp = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/a" component={A} />
        <Route exact path="/b" component={B} />
        <Route exact path="/c" component={C} />
        {testRoute()}
        <Redirect to="/c" />
      </Switch>
    </Router>
  );
};