React-Router v6

 

React-Router ?

•  신규 페이지를 불러오지 않는 상황에서 사용자가 요청한 URL에 따라
   해당 URL에 맞는 하나의 페이지를 렌더링해주는 라이브러리입니다.

const App = () => {
  return (
    <BrowserRouter>
      <Nav />
      <Routes>
	<Route path="/" element={<Main />}></Route>
	<Route path="/event" element={<Event />}></Route>
     	<Route path="*" element={<Error />}></Route> 
        //상단에 위치하는 라우트들의 규칙을 모두 확인, 일치하는 라우트가 없는경우 처리
      </Routes>
    </BrowserRouter>
  );
}
export default App;

 

 

useParams

• :id  와 같이 페이지 별 id값을 받아올 수 있습니다.
• <Route path='/post/:id' element={<Post />}/>
• id를 사용하는 페이지에서 useParams를 사용해줍니다.  

const {id} = useParams();

 

 

useSearchParams ( QueryString )

• ?를 사용하며, data?id=1&lang=ko 와 같이 네임과 벨류를 함께 전송해줍니다.

const [serchParams, setSearchParams] = useSearchParams();
const id = searchParams.get('id'); 
const lang = searchParams.get('lang'); 
console.log(id) //1 
console.log(lang) //ko