[React] React Route에 대해 알아보자

라우팅이란?

= 네트워크 상에서 url을 이용했을 때 어떤 경로를 이용해서 데이터를 받아올 건지 결정해주는 길을 결정해주는 것

= 사용자가 url을 요청했을 때 어떤 특정한 페이지로 연결할 건지 결정하는 매커니즘

= 사용자가 url을 줬을 때 어떤 페이지로 연결한건지!

 

 

SPA의 문제점

사용자가 북마크할 수 없다. 브라우저상에서 뒤로가기, 앞으로가기와 같은 네비게이션이 추가가 되지 않음

 

⇒ 해당 문제점을 해결하기 위해 React Router 등장

 

React Router?

사용자가 입력한 주소를 감지하는 역할을 한다.

import { BrowerRouter, Link, Router, Routes } from 'react-router-dom'

<BrowerRouter> 태그로 감싸준다.

<BrowerRouter>
	
</BrowerRouter>

<Routes> 태그로 path마다 무슨 컴포넌트를 보여줄건지 작성한다.

<BrowerRouter>
	<Routes>
		<Route path='/' exact element={<Home />}>
		<Route path='/home' exact element={<Home />}>
		<Route path='/profile' exact element={<Profile />}>
	</Routes>
</BrowerRouter>

<Link> 태그를 통해 클릭 시 자동으로 url을 변경할 수 있도록 할 수 있다.

<BrowerRouter>
	<nav>
		<Link to='/'>Home</Link>
		<Link to='/Profile'>Profile</Link>
	</nav>
	<Routes>
		<Route path='/' exact element={<Home />}>
		<Route path='/home' exact element={<Home />}>
		<Route path='/profile' exact element={<Profile />}>
	</Routes>
</BrowerRouter>

Route 사용 시 path를 여러 개 지정했을 경우 exact를 지정해주자.

v6부터 Route 사용법이 아래 코드와 같이 element를 지정하는 것으로 바뀌었다.

<Route path='/' exact element={<Home />}>
<Route path='/home' exact element={<Home />}>
<Route path='/profile' exact element={<Profile />}>

 

다른 화면으로 이동하는 Hook

v6버전 부터 useHistory() ⇒ useNavigate()로 변경!

const history = useHistory();

history.push('/maker');  // v5

///////////////

const navigate = useNavigate();

navigate('/maker'); // v6

navigate(
	'/maker',
	{ state: {id: ~~~} }); // 페이지 이동할 때 인자 전달 당연히 가능