Reagir-roteador-dom, 6 de atualização de ajuda: Todos os componentes de crianças de <Rotas> deve ser um <Rota> ou <Reagir.Fragmento>

Question 1

Nosso aplicativo atualizado recentemente para a versão beta de reagir-roteador-dom, e as coisas estavam bem. Então, quando eu tento atualizar para 6.0.2, eu tenho a sorte de invariantes sobre erros All component children of <Routes> must be a <Route> or <React.Fragment>. Isso é porque nós temos nossas rotas definidas como se segue:

Recurso.jsx:

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

rotas.jsx:

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

App.jsx:

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

Este, agora, resulta na mensagem de erro acima, porque o interior rotas (por exemplo, FeatureRoutes) estão envoltos em um componente funcional. Eu tentei devolver o literal JSX, mas, em seguida, obter um outro erro. Eu não tenho certeza de como corrigir isso: é a única resposta para reescrever completamente o modo como definimos nossas rotas? Nós também temos algumas rotas que são armazenados no back-end e um mapa para componentes personalizados - novamente, eu não tenho certeza de como eu posso quebrar-os agora eu não estou autorizado a ter um componente entre Rotas e a Rota.

Qualquer conselho apreciado.

Question 2

Eu acredito que uma pequena refatorar vai ter o seu aplicativo de renderização novamente.

No routes matriz de mudar o nome component para Component assim, ele pode ser processado como Reagir componente, por exemplo, como Reagir adequadamente chamado de componente (PascalCased).

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

Quando o mapeamento de routes compor a Component fora o Route componente element prop como JSX.

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

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

Eu acredito que uma pequena refatorar vai ter o seu aplicativo de renderização novamente.

No routes matriz de mudar o nome component para Component assim, ele pode ser processado como Reagir componente, por exemplo, como Reagir adequadamente chamado de componente (PascalCased).

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

Quando o mapeamento de routes compor a Component fora o Route componente element prop como JSX.

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

Reagir-roteador-dom, 6 de atualização de ajuda: Todos os componentes de crianças de <Rotas> deve ser um <Rota> ou <Reagir.Fragmento>

Pergunta

Melhor resposta

Em outros idiomas

Esta página está em outros idiomas

Popular nesta categoria

Perguntas populares nesta categoria