IT이야기

여러 경로를 반응 라우터 v4와 일치

cyworld 2022. 3. 13. 11:02
반응형

여러 경로를 반응 라우터 v4와 일치

동일한 구성 요소를 렌더링하는 경로가 2개인 경우 다음과 같이 경로 구성을 반복하지 않으려면 어떻게 해야 하는가?

<Route path="/path1" component={MyComp} />
<Route path="/path2" component={MyComp} />

지금까지 찾은 최고의 해결책(그러나 좀 이상한 것 같다):

<Route path="/:path(path1|path2)" component={MyComp} />

좋은 대답이야.이는 다음과 같은 시나리오에서도 도움이 된다.

<Route path="/path/path1" component={MyComp} />
<Route path="/path/:subpath(path2|path3)" component={MyAnotherComp} />

없는(path2|path3)두 가지 구성 요소MyComp그리고MyAnotherComp경로가 다음과 같을 경우 장착됨/path/path2.

PS. 코멘트로 추가되었을 수 있지만 자격이 없는 :)

<Route path={["/common-one", "/common-two"]} component={Common} />

https://reactrouter.com/web/api/Route 이상 버전 5의 경우

다중 일치(다른 매개 변수)를 허용해야 하지만 매개 변수가 없는 경우(예: 일치 URL):

  • /message
  • /migrate/migration
  • /1987/그것이 알고 있다.

선택적 매개변수로 이 작업을 수행할 수 있다(대괄호 뒤에 물음표 기록 참조)

<Route path="/questions/:tab(posted|answered)?" component={...} />

참조URL: https://stackoverflow.com/questions/43544674/match-multiple-path-with-react-router-v4

반응형