404 страницы в React отображается на каждой странице

Question

У меня есть файл маршрута, который содержит несколько таких маршрутов, как этот

const RouteUI = ({context}) =>
  <Switch>
  <React.Fragment>

    <SDPRouteUI context={context} />

    <SDPMRouteUI context={context} />

    <ACRouteUI context={context} />

    <DCRouteUI context={context} />

    <Route path=""
      render={() =>
        <NotFound context={context} />
      }
    />

  </React.Fragment>

  </Switch>

Компонент NotFound отображается на каждой странице, даже если он находится внутри коммутатора.

SDPRouteUI, SDPMRouteUI..etc - это другие файлы маршрута, такие как

const SDPRouteUI = ({context}) =>
  <Switch>
    <Route exact path='/sdp/account'
      render={() =>
        <SDPAccountPageSF context={context} />
      }
    />

    <Route exact path='/sdp/activate/back'
      render={() =>
        <SDPActivateBackSF context={context} />
      }
    />
<Switch>

Answer 1

Оператор переключения верхнего уровня не работает, потому что первый элемент, не являющийся маршрутом, автоматически обрабатывается, что в вашем случае равно React.Fragment.Даже если вы переместите элемент Switch в интервал React.Fragment, он не будет работать, поскольку другой компонент по умолчанию будет отображаться.

Для обработки вложенных маршрутов необходим шаблон «поставщик / потребитель».См. этот ответ для правильной обработки 404 маршрутов

Answer 2

<Route component={NotFound} />, возможно, решите вашу проблему

Если вы определите какой-либо маршрут без "пути", компонент коммутатора автоматически перейдет к компоненту NotFound.

<Route exact strict component ={NotFound} />, можетбыть более полезным.Для точного маршрута.