리액트 라우터는 다양한 경로의 페이지로 이동할때 사용하는 패키지이다.
기존의 페이지 변환 방식은 a 태그를 이용하는 것이었다.
<nav>
<ul>
<li>
<a href="index.html">홈</a>
</li>
<li>
<a href="about.html">About</a>
</li>
</ul>
</nav>
하지만 이런 방식을 활용한다면
같은 문제점들이 발생한다.
그래서 이런 문제점들을 해결하고자 탄생한게 리액트였지만, 리액트는 ui 라이브러리이기때문에 페이지 전환을 하기 위한 라우터는 따로 router 패키지를 다운 받아주어야한다.
npm install react-router-dom@6
react-router-dom은 react-router에 dom이 바인딩되어있다고 생각하면 된다.
웹 개발자는 react-router-dom을, 앱 개발자는 react-router-native를 설치하면 되고
react-router를 브라우저에서 쓰기 위한 상위 집합 라이브러리가 react-router-dom이다.
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<BrowserRouter><App /></BrowserRouter>);
import { Route, Routes } from "react-router-dom";
import Welcome from "./components/Welcome";
import Products from "./components/Products";
function App() {
return (
<div>
<Routes> // 여러개의 라우트들이 있을경우 감싸줘서 매칭시켜주는 역할
<Route path="welcome" element ={<Welcome />}> // 도메인.com/welcome으로 접속하면
// Welcome 컴포넌트 내용들을 보여주겠다.
</Route>
<Route path="products" element ={<Products />}>
</Route>
</Routes>
</div>
);
}
export default App;
이제 주소창에 /welcome을 입력하면 Welcome 컴포넌트를, /products를 입력하면 Products 컴포넌트를 띄어준다.