Router-Props

Angular에서처럼Route를이용해서PathVariable을받을수있다.

 

 

 

<Route path="/posts/:postId" component={Post}/>이런식으로path에다가parameter를받을값을정해준다.
 

그래고RouteComponentProps를이요해제네릭에받을파라미터명을입력하고match를이용해파라미터를받는다

const Post= (props: RouteComponentProps<{ postId: string}>) =>{

return(

<h3>Post {props.match.params.postId}</h3>

);

};

 

 

RouteComponentProps의 속성은 다음과 같다. 

 

history: H.History; 브라우저의 window.history객체와 비슷함, 주소를 임의로 변경 하거나 되돌아 갈 수 있다.

주소를변경하더라도spa 동장방식에맞게페이지일부만리로드

 

location: H.Location<S>; 브라우저의window.location 객체와 비슷함,  url을 다루기 쉽게 쪼개서 가지고 있음

 

match: match<P>; path에 정의한 것과 매치된 정보를 담고있다.

 

staticContext?: C;  서버사이드렌더링용?

 

 

 

 

쿼리파람받는법

 

path를 이용한 파라미터 뿐 아니라 query를 이용한 파라미터를 받는법도 있다. 

 

ex)

// 버튼을 누르면 goNextPost 가실행

<button onClick={goNextPost}>페이지 이동</button>

 

functiongoNextPost() {

constnextPostId= +props.match.params.postId+ 1;

props.history.push(`/posts/${nextPostId}`);

}

 

http://localhost:3000/posts/14?body=asdf를입력한 후 밑 처럼 받는다

<p>{new URLSearchParams(props.location.search).get('body')}</p>

 

URLSearchParams 말고 좀 더 좋은 라이브러리가 있으니 찾아 보도록!