리액트 라우터를 사용한 여러 파라미터

리액트 라우터를 사용한 여러 파라미터

React 15.0.2 및 React Router 2.4.0을 사용합니다.루트에 여러 개의 파라미터를 전달하고 싶은데 최적의 방법을 모르겠습니다.

<Route name="User" path="/user" component={UserPage}>   
    <Route name="addTaskModal" path="/user/manage:id" component={ManageTaskPage} />
</Route>

필요한 것은 다음과 같습니다.

 <Route name="User" path="/user" component={UserPage}>  
    <Route name="addTaskModal" path="/user/manage:id:type" component={ManageTaskPage} />
</Route>

@alexander-t에서 설명한 바와 같이:

path="/user/manage/:id/:type"

옵션인 채로 두는 경우는, 다음의 순서에 따릅니다.

path="/user/manage(/:id)(/:type)"

---

리액트 라우터 v4

React Router v4는 v1-v3과 다르며 옵션 경로 파라미터는 매뉴얼에 명시적으로 정의되어 있지 않습니다.

대신 path-to-regexp가 인식하는 경로 파라미터를 정의하도록 지시됩니다.이를 통해 반복 패턴, 와일드 카드 등 경로를 정의할 때 훨씬 더 유연하게 사용할 수 있습니다.따라서 파라미터를 옵션으로 정의하려면 후행 물음표(?)를 추가합니다.

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

path="/user/manage/:pathParam1?/:pathParam2?"

예.

<Route path="/user/manage/:pathParam1?/:pathParam2?" component={MyPage} />

반면 V4에서는 필수 파라미터가 여전히 동일합니다.

path="/user/manage/:id/:type"

PathParam 값에 액세스하려면 다음 작업을 수행합니다.

this.props.match.params.pathParam1

<Route path="/:category/:id" exact component={ItemDetails} />

구성 요소, 사용useParams부터react-router-dom,

import { useParams } from 'react-router-dom'
export default function ItemDetails(props) {

const {id, category} = useParams();
return (
    <div className="">
        {id}
        {category}
    </div>
)

여기 해결책이 있습니다.props및 라우팅 라이브러리를 사용합니다.

이거 드셔보세요

<Route name="User" path="/user" component={UserPage}>  
  <Route name="addTaskModal" path="/user/manage/:id/:type" component={ManageTaskPage} />
</Route>

옵션 param 필드의 경우 어떤 이유로 중괄호 안에 있는 콜론() 앞에 슬래시가 없어도 정상적으로 작동합니다.리액트 라우터 2.6배

언급URL : https://stackoverflow.com/questions/37696391/multiple-params-with-react-router