[javascript] 선택적 경로 매개 변수가있는 반응 라우터

JAVASCRIPT / 글쓴이

선택적 경로 매개 변수를 사용하여 경로를 선언하고 싶습니다. 따라서 페이지를 추가하면 추가 작업을 수행 할 수 있습니다 (예 : 데이터 채우기).

http : // localhost / app / path / to / page <= 페이지 렌더링
http : // localhost / app / path / to / page / pathParam <= pathParam 에 따라 일부 데이터가 포함 된 페이지 렌더링

내 반응 라우터에는 두 가지 옵션을 지원하기 위해 다음 경로가 있습니다 (간단한 예입니다).

<Router history={history}>
   <Route path="/path" component={IndexPage}>
      <Route path="to/page" component={MyPage}/>
      <Route path="to/page/:pathParam" component={MyPage}/>
   </Route>
</Router>

내 질문은 우리가 한 경로로 선언 할 수 있습니까? 두 번째 행만 추가하면 매개 변수가없는 경로를 찾을 수 없습니다.

편집 # 1 :

다음 구문에 대해 여기 에 언급 된 해결책이 효과 가 없었습니다. 맞습니까? 문서에 존재합니까?

<Route path="/product/:productName/?:urlID?" handler={SomeHandler} />

내 반응 라우터 버전은 1.0.3입니다.

답변

게시 한 수정 사항은 이전 버전의 React-router (v0.13)에 유효하며 더 이상 작동하지 않습니다.

라우터 v1, v2 및 v3 반응

버전부터 1.0.0다음을 사용하여 선택적 매개 변수를 정의합니다.

<Route path="to/page(/:pathParam)" component={MyPage} />

여러 선택적 매개 변수의 경우 :

<Route path="to/page(/:pathParam1)(/:pathParam2)" component={MyPage} />

괄호 ( )를 사용 하여 슬래시 ( /)를 포함 하여 경로의 선택적 부분을 줄 바꿈합니다 . 공식 문서 의 경로 일치 안내서 페이지를 확인하십시오 .

참고 : 매개 변수는 다음에 URL 세그먼트를 일치 , 또는 . 경로 및 매개 변수에 대한 자세한 내용은 여기를 참조하십시오 .:paramName/?#

라우터 v4 이상 반응

React Router v4는 기본적으로 v1-v3과 다르며 선택적 경로 매개 변수는 공식 문서 에도 명시 적으로 정의되어 있지 않습니다 .

대신 정규 경로 경로가 이해 하는 path매개 변수 를 정의하라는 지시를 받습니다. 이를 통해 반복 패턴, 와일드 카드 등과 같이 경로를 정의 할 때 훨씬 유연하게 사용할 수 있습니다. 따라서 매개 변수를 선택적으로 정의하려면 후행 물음표 ( ) 를 추가하십시오 .?

따라서 선택적 매개 변수를 정의하려면 다음을 수행하십시오.

<Route path="/to/page/:pathParam?" component={MyPage} />

여러 선택적 매개 변수의 경우 :

<Route path="/to/page/:pathParam1?/:pathParam2?" component={MyPage} />

참고 : 반작용 라우터 V4는 호환되지 않는 로반응 라우터 릴레이( 여기에서 더 읽으십시오 ). 대신 v3 이전 버전 (v2 권장)을 사용하십시오.

답변

검색 후 여기에 도착하는 모든 React Router v4 사용자의 경우, 선택적 매개 변수 <Route>는 ?접미사 로 표시 됩니다.

관련 문서는 다음과 같습니다.

https://reacttraining.com/react-router/web/api/Route/path-string

경로 : 문자열

정규식 경로가 이해 하는 유효한 URL 경로

<Route path="/users/:id" component={User}/>

https://www.npmjs.com/package/path-to-regexp#optional

선택 과목

매개 변수에 물음표 (?)를 붙여 매개 변수를 선택적으로 지정할 수 있습니다. 또한 접두사를 선택적으로 만듭니다.

페이지 번호를 사용하거나 사용하지 않고 액세스 할 수있는 사이트의 페이지 매김 섹션에 대한 간단한 예입니다.

<Route path="/section/:page?" component={Section} />

답변

여러 선택적 매개 변수에 대한 작업 구문 :

<Route path="/section/(page)?/:page?/(sort)?/:sort?" component={Section} />

이제 URL은 다음과 같습니다.

  1. /부분
  2. / section / page / 1
  3. / section / page / 1 / sort / asc

답변

반응 경로 V5 이상 에서는 다중 경로에 대해 아래 구문을 사용하십시오.

<Route
          exact
          path={[path1, path2]}
          component={component}
        />

답변