Справка по обновлению react-router-dom 6: Все дочерние компоненты <Маршрутов> должны быть <Маршрутами><Маршрутом> или <Маршрутом>Фрагмент>

Question 1

Наше приложение недавно обновилось до бета-версий react-router-dom, и все было в порядке. Затем, когда я пытаюсь обновить версию до 6.0.2, я получаю множество инвариантных ошибок о All component children of <Routes> must be a <Route> or <React.Fragment>. Это связано с тем, что наши маршруты определены следующим образом:

Особенность.jsx:

export const FeatureRoutes = () => (
  <Routes>
    <Route path="/" element={<Feature1 />} />
    <Route path="/*" element={<NotFound />} />
  </Routes>
);

маршруты.jsx:

export const routes = [
  {
    path: "feature",
    component: FeatureRoutes,
  },
  /* lots of other routes, defined the same way: <Route> wrapped in a component */
];

Приложение.jsx:

<Routes>
  {routes.map((route) => (
    <Route key={route.path} path={`${pathPrefix}/${route.path}/*`}>
      <route.component />
    </Route>
  ))}
</Routes>

Теперь это приводит к ошибке выше, потому что внутренние маршруты (например FeatureRoutes) заключены в функциональный компонент. Я попытался вернуть буквальный JSX, но затем получил еще одну ошибку. Я не уверен, как это исправить: является ли единственным ответом полностью переписать то, как мы определяем наши маршруты? У нас также есть некоторые маршруты, которые хранятся в фоновом режиме и сопоставляются с пользовательскими компонентами-опять же, я не уверен, как я могу их обернуть, теперь мне запрещено иметь компонент между маршрутами и маршрутом.

Любой совет приветствуется.

Question 2

Я верю, что небольшой рефакторинг снова приведет к рендерингу вашего приложения.

В routes переименование массива component Для Component таким образом, он может быть отрисован как компонент React, т. е. как правильно названный компонент React (PascalCased).

const routes = [
  {
    path: "feature",
    Component: FeatureRoutes
  }
  /* lots of other routes, defined the same way: <Route> wrapped in a component */
];

При составлении карты routes визуализировать Component выйдя на Route компонент element опора как JSX.

<Routes>
  {routes.map(({ path, Component }) => (
    <Route
      key={path}
      path={`${pathPrefix}/${path}/*`}
      element={<Component />}
    />
  ))}
</Routes>

Drew Reese · Answer 1 · 2021-11-23T16:27:48

Я верю, что небольшой рефакторинг снова приведет к рендерингу вашего приложения.

В routes переименование массива component Для Component таким образом, он может быть отрисован как компонент React, т. е. как правильно названный компонент React (PascalCased).

const routes = [
  {
    path: "feature",
    Component: FeatureRoutes
  }
  /* lots of other routes, defined the same way: <Route> wrapped in a component */
];

При составлении карты routes визуализировать Component выйдя на Route компонент element опора как JSX.

<Routes>
  {routes.map(({ path, Component }) => (
    <Route
      key={path}
      path={`${pathPrefix}/${path}/*`}
      element={<Component />}
    />
  ))}
</Routes>

Справка по обновлению react-router-dom 6: Все дочерние компоненты <Маршрутов> должны быть <Маршрутами><Маршрутом> или <Маршрутом>Фрагмент>

Вопрос

Лучший ответ

На других языках

Эта страница на других языках

Популярное в этой категории

Популярные вопросы в этой категории