React Router - страница 404 всегда отображается из-за пользовательского компонента маршрута - PullRequest
Новая
       4

React Router - страница 404 всегда отображается из-за пользовательского компонента маршрута

1 голос
/ 18 апреля 2020

У меня есть компонент, который принимает аналогичные параметры для стандартного реагирующего маршрутизатора Route и возвращает маршрут. Этот возвращенный маршрут имеет реквизит рендера, который просто проходит через компонент, но добавляет компонент nav. Этот пользовательский NavRoute не работает с компонентом реагирующего маршрутизатора Switch, так как, когда я использую пользовательский компонент внутри коммутатора вместе с универсальной страницей 404, страница всегда отображается.

Как можно Я заставляю компонент 404 показывать только, если ни один из других маршрутов не соответствует URL?

NavRoute 

const NavRoute = ({ exact, path, component: Component }) => {
  return (
    <Route exact={exact} path={path} render={(props) => (
      <div style={styleSideNav}>
        <Nav />
        <Component {...props} />
      </div>
    )}/>
  );
});

Использование 

  <Switch>
    <NavRoute exact path="/" component={Home} />
    <NavRoute exact path="/about" component={About} />
    <Route path="/" component={Page404} />
  </Switch>

РЕДАКТИРОВАТЬ: Codesandbox полного примера: https://codesandbox.io/s/react-router-stack-overflow-5jcum URL кодовandobx: https://5jcum.csb.app/invite/abc

1 Ответ

1 голос
/ 18 апреля 2020

Переключатель работает только с компонентами первого уровня, расположенными непосредственно под ним. Он не может пройти по всему дереву.

https://github.com/ReactTraining/react-router/issues/5785#issuecomment -351067856

Чтобы исправить это, мы можем передать массив маршрутов вместо маршрутов, завернутых в фрагмент. Я внес изменения и обновил коды и окна.

https://codesandbox.io/s/react-router-stack-overflow-hu62w?file= / src / App. js

...