옵션 경로 매개 변수를 사용한 Respect Router

옵션 경로 매개 변수를 사용한 Respect Router

옵션 경로 매개 변수를 사용하여 경로를 선언하고 싶기 때문에 추가 작업을 수행하는 페이지(예: 일부 데이터 채우기)를 추가합니다.

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

'는 괄호'를 사용합니다.( )선두 슬래시를 포함한 루트의 임의의 부분을 랩합니다(/)) 공식 문서의 "Route Matching Guide" 페이지를 참조하십시오.

주의: :paramName는 다음 합니다./,? , 「」#경로 및 파라미터에 대한 자세한 내용은 여기를 참조하십시오.

---

리액트 라우터 v4 이후

React Router v4는 v1-v3와는 근본적으로 다르며 옵션 패스 파라미터는 공식 매뉴얼에서도 명시적으로 정의되어 있지 않습니다.

낫다'를 .pathpath-to-regexp가 인식하는 파라미터입니다.이를 통해 반복 패턴, 와일드 카드 등 경로를 정의할 때 훨씬 더 유연하게 사용할 수 있습니다.따라서 파라미터를 옵션으로 정의하려면 후행 물음표()를 추가합니다.?를 참조해 주세요.

따라서 옵션 파라미터를 정의하려면 다음 작업을 수행합니다.

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

및 여러 옵션 파라미터의 경우:

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

주의: React Router v4는 react-router-relay와 호환되지 않습니다(자세한 내용은 여기를 참조하십시오).대신 v3 이전 버전(v2 권장)을 사용하십시오.

후 Router React Router v4 내의 과 같습니다.<Route> are ?서픽스

다음은 관련 문서입니다.

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

경로: 문자열

path-to-regexp가 인식하는 유효한 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. /섹션/페이지/1
3. /section/page/1/sc/asc

리액트 라우터 버전을 1.0.3으로 언급했으므로 이전 답변에서 해결책을 찾을 수 있습니다.

단, 리액트라우터 v6에서는 이 옵션이 이미 삭제되어 있습니다.여기

따라서 리액트 라우터 v6의 경우 다음과 같습니다.

<Route path='/page/:friendlyName/:sort?' element={<Page/>} />

대체는 다음과 같습니다.

<Route path='/page/:friendlyName/:sort' element={<Page/>} />
<Route path='/page/:friendlyName/' element={<Page/>} />

또는 다음과 같이 사용할 수도 있습니다.

<Route path="/page/:friendlyName">
    <Route path=":sort" element={<Page />} />
    <Route path="" element={<Page />} />
 </Route>

리액트 라우터 V5 이상의 경우 여러 경로에 대해 다음 구문을 사용합니다.

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

일반 파라미터와 마찬가지로 옵션파라미터 선언은 루트 경로속성의 문제일 뿐입니다.물음표로 끝나는 파라미터는 옵션으로 취급됩니다.

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

Sayak이 지적한 바와 같이 리액트라우터 V6에서는 옵션 파라미터가 삭제되어 있습니다.내가 찾은 가장 쉬운 해결책은 단지 두 개의 경로를 만드는 것이었다.하나는 매개 변수가 없는 URL용이고 다른 하나는 다음을 포함하는 것입니다.

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

언급URL : https://stackoverflow.com/questions/35604617/react-router-with-optional-path-parameter