React : Router: useParams, url 파라미터를 이용한 <특정 상품 - 특정 페이지 매칭>. 동적라우팅

url 파라미터를 이용한 특정 상품 - 특정 페이지 매칭하기.

동적 라우팅!

 

+ 파라미터가 아닌 현재 페이지의 Pathname을 가져오려면 useLocation()을 사용해야 한다.

 

 

라우터 path 속성 값 안에 있는 :id 값을 url 파라미터라고 한다.

 

<Route path=“/about/:0” element ={<About shoes={shoes}/>}>
<Route path=“/about/:1” element ={<About shoes={shoes}/>}>
<Route path=“/about/:2” element ={<About shoes={shoes}/>}>

 

현재 3개의 라우터 패스를 통해 어바웃 페이지 3개를 만들었다. 

세 페이지의 url 파라미터는 각각 0 / 1 / 2 이고, 동일한 About 컴포넌트 페이지가 보여지고 있다.

 

<Route path=“/about/:productId” element ={<About shoes={shoes}/>}>

 

이것을 위의 코드처럼 변수명으로 작성하게 된다면 동적라우팅이 가능하게 된다.

 

위에서 라우터를 통해 만들어둔 현재의 About 컴포넌트 페이지는 아래와 같다. 모두 같은 값(shoes[0])이 들어있다.

parameter값을 통해서 다른 path로 들어가도 같은 About페이지가 표시되고 있다.

 

function About(props) {
	return (
        <div> 
        {props.shoes[0].title}
        </div>
		)};

 

이 때 각각의 url 파라미터에 맞는 상품이 있는 페이지로 들어 가고 싶다면,

 

(예를 들어

path - detail/0으로 접속하면 shoes[0]번 상품) 

path - detail/12 로 접속하면 shoes[12]번 상품)

-> 현재는 detail/1로 접속해도 shoes페이지 shoes[0]이 고정값으로 나온다)

 

useParams를 통해 구현할 수 있다.

 

 

let { id } = useParams();

return (

 <div> { id } </div>  ) 

 

공식 문서와, 여러 사례들을 통해 이런식으로 쓴다는 것을 알 수 있었는데,

제가 작성한 코드에서는 동일하게 작동이 되지 않았습니다.  useParams안의 값이 { 0: "0" } 객체 값으로 받아져왔다.

 

let id = useParams();

return ( id[0]) 이렇게 사용하였습니다.

 

왜 동일하게 작동되지 않았는지 수정 예정.

 

 

예시 흐름

1. 페이지 이동 버튼을 클릭한다.

2. Id가 13인 페이지로 이동한다.

3. 13이라는 Id를 useParams를 통해 받아온다.

4. 그 Id를 통해 데이터중 Id가 13인 데이터를 가져온다. 

 

 

 

* tip

- If (id !== number) {

return “찾는 상품이 없습니다”

}

 

- 파라미터는 여러번 쓸 수 있다.   

path=“detail/:id/:type/:title”