React-router-dom 6 yükseltme yardımı: <Routes> öğesinin tüm bileşen alt öğeleri <Routes> <Route>veya<Route> olmalıdırParça>

Question 1

Uygulamamız yakın zamanda react-router-dom'un beta sürümlerine güncellendi ve her şey yolundaydı. Sonra 6.0.2'ye güncellemeye çalıştığımda, birçok değişmez hata alıyorum All component children of <Routes> must be a <Route> or <React.Fragment>. Bunun nedeni, rotalarımızın aşağıdaki gibi tanımlanmış olmasıdır:

Özellik.jsxname:

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

rotalar.jsxname:

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

Uygulama.jsxname:

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

Bu şimdi yukarıdaki hatayla sonuçlanır, çünkü iç yollar (örneğin FeatureRoutes) işlevsel bir bileşene sarılır. Değişmez jsx'i döndürmeyi denedim ama sonra başka bir hata alıyorum. Bunu nasıl düzelteceğimizden emin değilim: rotalarımızı nasıl tanımladığımızı tamamen yeniden yazmanın tek cevabı bu mu? Ayrıca arka uçta saklanan ve özel bileşenlere eşlenen bazı rotalarımız var - yine bunları nasıl sarabileceğimden emin değilim, şimdi Rotalar ve Rota arasında bir bileşene sahip olmama izin verilmiyor.

Herhangi bir tavsiye takdir.

Question 2

Küçük bir refactor'un uygulamanızın yeniden oluşturulmasını sağlayacağına inanıyorum.

İçinde routes dizi yeniden adlandırma component -e doğru Component böylece bir React bileşeni, yani uygun şekilde adlandırılmış bir React bileşeni (PascalCased) olarak işlenebilir.

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

Eşlerken routes oluştur Component dışarı çık Route bileşenin element JSX olarak destekleyin.

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

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

Küçük bir refactor'un uygulamanızın yeniden oluşturulmasını sağlayacağına inanıyorum.

İçinde routes dizi yeniden adlandırma component -e doğru Component böylece bir React bileşeni, yani uygun şekilde adlandırılmış bir React bileşeni (PascalCased) olarak işlenebilir.

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

Eşlerken routes oluştur Component dışarı çık Route bileşenin element JSX olarak destekleyin.

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

React-router-dom 6 yükseltme yardımı: <Routes> öğesinin tüm bileşen alt öğeleri <Routes> <Route>veya<Route> olmalıdırParça>

Soru

En iyi cevabı

Diğer dillerde

Bu sayfa diğer dillerde

Bu kategoride popüler

Popüler soruları bu kategoride