React-router-dom

다른 페이지를 렌더링 해주기 위해 사용하는 라이브러리

npm install react-router-dom

지금 쓰는 버전은 6인데 기존에 많이 쓰던 v5와 많이 달라졌다고 한다.

index.js

import { BrowserRouter } from 'react-router-dom';
<BrowserRouter>
			<App />
</BrowserRouter>

Routes 컴포넌트 위에 BrowserRouter 컴포넌트로 덮어줘야 사용 가능하다.

App.js

import Home from './routes/Home';
import { Routes, Route } from 'react-router-dom';
import Detail from './routes/Detail';
function App() {
	return (
		<Routes>
			<Route path='/' element={<Home />} />
			<Route path='/movie/:id' element={<Detail />} />
		</Routes>
	);
}

Routes컴포넌트로 덮고

그 아래에 Route컴포넌트를 이용해서 path에 따라 어떤 컴포넌트를 렌더링 해줄지 정할 수 있다.

path와 정확하게 일치해야만 렌더링을 해준다.(v5에서 exact 속성을 따로 넣어준것 처럼)

path에 :를 넣어서 파라미터로 전달할수있다.

Detail.js

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

function Detail() {
	return (
		<div>
			<h1>Detail</h1>
			<Link to='/'>asd</Link>
		</div>
	);
}
export default Detail;

경로를 바꿀땐 기존처럼 a태그를 이용하는게 아니라 react-router-dom에서 제공해주는 Link컴포넌트를 이용하면 된다.

페이지 전체가 재실행되지 않고 필요한 컴포넌트만 렌더링해준다.

다른 경로로 이동하고 싶으면

useNavigate 훅을 이용하면된다

const navigate=useNavigate();
navigate('/');

navigate('about'); //현재 경로에서 /about을 붙인 경로로 이동