HTML5의 History API에 기반하는 라우팅 라이브러리
컴포넌트 기반 동적 라우팅
React는 SPA이기 때문에 index.html 이라는 하나의 템플릿에서 컴포넌트를 기반으로 라우팅 및 렌더링
설치
npm i react-router-dom --save
BrowserRouter
import { BrowserRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);
Routes
Route
ex) 차례대로
function App() {
return (
<div className="App">
<Routes>
<Route path="/" element={<Home/>}/>
<Route path="profile" element={<Profile/>}/>
<Route path="board" element={<Board/>}/>
</Routes>
</div>
)
}
Link
import { Link } from "react-router-dom";
function Home() {
return (
<div>
<h1>홈페이지</h1>
<Link to="menu">메뉴</Link>
<Link to="Profile">프로필</Link>
</div>
)
}
export default Home;
Outlet
<Routes>
<Route path="/member" element={<Member />}>
<Route path=":memberId" element={<MemberInfo />} />
</Route>
</Routes>
{/* Member */}
<div>
<header>Member</header>
<Outlet /> {/* MemberInfo의 component가 Outlet의 위치에 위치하게 된다. */}
</div>
useNavigate
import { useNavigate } from 'react-router-dom';
export default function Test() {
const navigate = useNavigate();
const handleSubmit = async (e) => {
await submitForm(e.target);
navigate('/main');
};
return (
<div>
<form onSubmit={handleSubmit}>제출</button>
</div>
);
}
useLocation
useParams