반응형
여러 경로를 반응 라우터 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
반응형
'IT이야기' 카테고리의 다른 글
Typecript에서 'padStart' 속성이 'string' 형식에 존재하지 않는다고 알려준다. 왜? (0) | 2022.03.14 |
---|---|
반응 - 무거운 하위 구성 요소 렌더링 지연 (0) | 2022.03.13 |
다른 Python 스크립트에서 Python 스크립트 실행, 인수 전달 (0) | 2022.03.13 |
create-react-app을 실 대신 npm으로 만드는 방법? (0) | 2022.03.13 |
동일한 컴포넌트를 동적으로 반응 (0) | 2022.03.13 |