React Router의 동일한 구성 요소에 대한 여러 경로 이름

세 가지 경로에 동일한 구성 요소를 사용하고 있습니다.

<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}.