반응 라우터 dom6 업그레이드하는 데 도움:모든 구성 요소의 아이들을<노선>어야 합<날고있다>또는<반응합니다.단편>

Question 1

우리의 최근 응용 프로그램으로 업데이트 베타 버전의 반응 라우터 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 */
];

App.jsx:

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

이제 결과에 오류가기 때문에,위의 내부 노선에(예를 들어 FeatureRoutes용)에 싸여 기능적 요소입니다. 했는데 돌아온 문자 JSX 그러나 다른 오류가 있습니다. 나는 확실하지 않을 수정하는 방법이 유일한 대답을 완전히 다시 작성 방법을 정의하고 우리의 노선? 우리는 또한 일부 노선에 저장되는 back-end 고 지도하는 맞춤 구성 요소를 다시 방법을 모르겠어요 나는 랩이 이제 나를 허용하지 않는 구성 요소 사이의 경로 및 경로입니다.

모든 조언에 감사드립니다.

Question 2

내가 믿는 작은 리팩터링을 것입니다 당신의 응용 프로그램을 얻을 렌더링을 다시합니다.

에 routes 배열 이름 바꾸기 component 하기 Component 그래서 렌더링될 수 있으로 반응하는 구성 요소,즉,로 제대로 이름에 반응성(PascalCased).

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

When mapping 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 그래서 렌더링될 수 있으로 반응하는 구성 요소,즉,로 제대로 이름에 반응성(PascalCased).

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

When mapping routes 렌더링 Component 에 Route 구성 요소의 element 소품 으로 JSX.

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

반응 라우터 dom6 업그레이드하는 데 도움:모든 구성 요소의 아이들을<노선>어야 합<날고있다>또는<반응합니다.단편>

질문

최고의 응답

다른 언어로

이 페이지는 다른 언어로되어 있습니다

이 카테고리에서 인기

인기 있는 질문에 이 카테고리