routes
React Router
설치하기
npm i react-router-dom
📍 Routes & Route
import { Routes, Route } from 'react-router-dom';
// path는 경로, element는 해당 경로에 렌더링할 컴포넌트
<Routes>
<Route path='/' element={<Homepage />} />
<Routes path='/about' element={<About />} />
</Routes>
📍 Browser Router
브라우저의 history API를 사용하여 URL을 관리하는 라우터. 현재 url에 따라 UI를 업데이트한다. url 주소에 관련한 정보를 props로 조회 및 사용 가능하다.
// main.tsx에 설정
import { BrowserRouter } from 'react-router-dom';
root.render((
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
));
📍 Memory Router
테스트나 서버사이드 렌더링을 위해 메모리에 URL을 저장하는 라우터
import { MemoryRouter } from 'react-router-dom';
import App from './App';
const context = describe;
describe('App', () => {
context('when the current path is "/about"', () => {
if('renders the about page', () => {
render((
<MemoryRouter initialEntries={['/about']}>
<App />
</MemoryRouter>
));
screen.getByText(/about page/);
})
})
});
✏️ 정리
공부한 내용
Last updated