세 가지 경로에 동일한 구성 요소를 사용하고 있습니다.
<Router>
<Route path="/home" component={Home} />
<Route path="/users" component={Home} />
<Route path="/widgets" component={Home} />
</Router>
어쨌든 그것을 결합하여 다음과 같이 할 수 있습니까?
<Router>
<Route path=["/home", "/users", "/widgets"] component={Home} />
</Router>
답변
react-router v4.4.0-beta.4 부터 공식적으로 v5.0.0에서는 이제 구성 요소로 확인되는 경로 배열을 지정할 수 있습니다.
<Router>
<Route path={["/home", "/users", "/widgets"]} component={Home} />
</Router>
배열의 각 경로는 정규식 문자열입니다.
답변
최소한 react-router v4에서는 path정규식 문자열이 될 수 있으므로 다음과 같이 할 수 있습니다.
<Router>
<Route path="/(home|users|widgets)/" component={Home} />
</Router>보시다시피 약간 장황하기 때문에 component/ route가 이와 같이 간단 하다면 아마도 가치가 없을 것입니다.
물론 이것이 실제로 자주 발생하는 경우 항상 paths정규식 또는 .map논리를 재사용 할 수있는 배열 매개 변수를받는 래핑 구성 요소를 만들 수 있습니다 .
답변
v4보다 낮은 버전의 React Router를 사용하는 경우에는 그렇지 않다고 생각합니다.
map하지만 다른 JSX 구성 요소와 마찬가지로를 사용할 수 있습니다 .
<Router>
{["/home", "/users", "/widgets"].map((path, index) =>
<Route path={path} component={Home} key={index} />
)}
</Router>편집하다
path-to-regexp 가 지원하는 한 react-router v4 의 경로 에 정규식을 사용할 수도 있습니다 . 자세한 내용은 @Cameron의 답변을 참조하십시오.
답변
react-route-dom v5.1.2부터 다음과 같이 여러 경로를 전달할 수 있습니다.
<Route path={"/home" | "/users" | "/widgets"} component={Home} />그리고 분명하게 Home jsx 파일을 맨 위에 가져와야합니다.
답변
기타 옵션 : 경로 접두사를 사용합니다. /pages예를 들면. 당신은 얻을 것이다
/pages/home/pages/users/pages/widgets
그런 다음 Home구성 요소 내부에서 세부적으로 해결합니다 .
<Router>
<Route path="/pages/" component={Home} />
</Router>답변
React Router 문서에 따르면 proptype ‘path’는 string 유형이므로 Route Component에 소품으로 배열을 전달할 수있는 방법이 없습니다.
경로 만 변경하려는 경우 다른 경로에 대해 동일한 구성 요소를 사용할 수 있습니다.
답변
react-router v4.4부터는 아래와 같이 할 수 있습니다.
경로를 변수에 저장하고 아래로 전달하고 ‘|’를 사용하십시오. 운영자.
let home = "/home" ;
let users = "/users”;
let widgets = "/widgets" ;
<Route path={ {home} | {users} | {widgets} } component={Home} /> 따라서 모든 경로에 대해 일치하는 것이 렌더링됩니다 component={Home}.
