React Router 및 useNavigate Hook

• 브라우저의 url을 감지하여 이에 따른 적절한 컴포넌트를 보여주도록 함

 

• 설치

npm install react-router-dom

 

• 사용
  • BrowserRouter 태그가 root로 위치해야 함
  • Routes 태그 안에 각각 Route 태그가 위치함
  • Url 별 각 Route 태그를 작성하여 렌더링 되어야 하는 컴포넌트를 지정

import {BrowserRouter, Routes, Route } from 'react-router-dom';

...
<BrowserRouter>
	<Routes>
    	//메인페이지
  		<Route path = '/' element = {<엘레멘트이름/>} /> 
        // url주소/help 페이지
        <Route path = '/help' element = {<엘레멘트이름/>} /> 
        ...
    </Routes>
</BrowserRouter>

...

 

 

• useNavigate
  • 페이지간 이동을 위한 훅
  • useNavigate 는 <BrowserRouter> 가 있는 함수 안에서 사용 하면 안되고, 별도의 함수를 만들어서 사용 ->  <BrowserRouter> 함수가 있는곳에서 호출 하는 방식으로 사용해야 오류가 안난다

import {useNavigate} from 'react-router-dom';

....

export function Menu()
{
	const navigate = useNavigate();
	return (
    <div>
		<button onClick = {() => navigate('이동위치')} >click</button>
        ....
    </div>
    );    
}


....

import {BrowserRoute, Routes, Route} from 'react-router-dom';
import {Menu} from '위치';

export function MainPage()
{
	.....
    <BrowserRoute>
    	<Menu/>
        <Routes>
        	<Route path = 'url경로' element = { <엘레먼트명/>} />
            ....
        <Routes/>
    </BrouserRoute>

}