React 프로젝트에서 검색기능을 구현하려고 검색페이지 Router를 생성하던중에 의문이 생겼다. 보통 검색할 단어를 입력하고 그 입력한 단어의 데이터를 보여주는 페이지로 이동하게 되면 url 주소가 그냥 /search 가 아니라 /search?key=value 이런식으로 query parameter가 붙는데
ex) 마켓컬리 사이트에서 빵을 검색해보았다. 이런식의 url을 만들고 싶었다.
처음엔 단순하게 Router 생성할 때 상세페이지처럼 /search/:id url파라미터를 만들어줄 때 처럼 하고 useNavigate으로 이동경로 입력해줄 때 /search?query=${search}형식으로 해줬는데 빈 페이지가 나왔다. Search 페이지 Component를 보여주지 않은 것으로 보아 /search경로로 이동한 게 아닌 그냥 /search?query=${search}이 경로로 따로 이동을 한 것으로 보인다.
그래서 이것저것 찾아보았는데,,, 정말 허무할 정도로 단순했더랬다.
그냥 router 생성할 때 /search하고 Search Component 연결해주고
useNavigate으로 이동경로 설정할 때 위에처럼 /search?query=${search} 이렇게 설정해주면 내가 원하는대로 queryString url이 형성되면서 내가 원하는 Search 페이지 Component로 잘 이동한 걸 확인할 수 있었다.
