React Router - отображение маршрутов с ошибкой 404 - PullRequest
Новая
       12

React Router - отображение маршрутов с ошибкой 404

0 голосов
/ 10 марта 2020

В настоящее время я использую React Router. Я предпочитаю синтаксис файла конфигурации маршрутов и отображение массива маршрутов для рендеринга маршрута, в отличие от опции <Switch>. 

{routes.map(route => {
        return (
          <PrivateRoute
            key={route.path}
            path={route.path}
            exact
            component={route.component}
          />
        );
      })}

Есть ли способ с приведенным выше вариантом использования, чтобы иметь компонент 404 для всех неточных совпадающих маршрутов.

Я видел подход <Switch>, подобный этому: https://reacttraining.com/react-router/web/example/no-match. Как уже упоминалось, я предпочитаю объявлять все маршруты в файле конфигурации маршрутов с указанием пути, компонента и имени пользователя. Если я go по маршруту коммутатора, то конфигурация маршрута используется только для хлебных крошек и становится менее полезной

1 Ответ

1 голос
/ 10 марта 2020

Если вы собираетесь определять свои маршруты в конфигурационном файле, то вам, вероятно, следует использовать response-router-config (который также является частью response-router)

Если у вас есть возможность взглянуть на реализацию renderRoutes, тогда вы заметите, что он внутренне использует компонент Switch, что означает, что вы можете поместить свои "404" маршруты в конец списка и он должен вернуться к этому, если нет другого соответствия, например: 

const routes = [
  {
    component: Root,
    routes: [
      {
        path: "/",
        exact: true,
        component: Home
      },
      {
        path: "/child/:id",
        component: Child,
        routes: [
          {
            path: "/child/:id/grand-child",
            component: GrandChild
          }
        ]
      },
      {
        path: "*",
        component: NotFound,
      },
    ]
  }
]

Вы также можете реализовать такой компонент RedirectToNotFound: 

const RedirectToNotFound = () => <Redirect to="/404" />;

И затем настроить Конфигурационный файл выглядит так: 

const routes = [
  {
    component: Root,
    routes: [
      {
        path: "/",
        exact: true,
        component: Home
      },
      {
        path: "/child/:id",
        component: Child,
        routes: [
          {
            path: "/child/:id/grand-child",
            component: GrandChild
          }
        ]
      },
      {
        path: "/404",
        component: NotFound
      },
      {
        path: "*",
        component: RedirectToNotFound,
      },
    ]
  }
]

Полное раскрытие: я никогда не использовал react-router-config и , если у вас нет очень специфических c потребностей Я бы не рекомендовал его использовать.

...