[23.01.12] react-router-dom 사용 방법

내가 사용한 방법이랑 드림코딩 강의에서 사용한 방법이 달라서 정리

방법1. BrowserRouter

• BrowserRouter > Routes > Route 순으로 컴포넌트 감싼다
• Link 컴포넌트에서 to={path}를 이용해서 원하는 경로로 이동

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Header from './Components/Header';
import Home from './pages/Home';
import About from './pages/About';

function App() {
  return (
    <BrowserRouter>
      <Header />
      <Routes>
        <Route path="/" element={<Home />}></Route>
        <Route path="/about" element={<About />}></Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

방법2. createBrowserRouter()

• react router v6.4부터 이용 가능
• 최상단에서 를 import
  • 에는 필수로 router={} props을 넣어줘야 한다
  • router에는 createBrowserRouter()로 생성한 router를 넘겨주면 된다
• createBrowserRouter()
  • 라우팅할 path, element를 작성
  • children에는 하위에 라우팅할 경로를 작성

// App.js

const router = createBrowserRouter([
	{
		path: '/',
		element: <Root />,
		errorElement: <NotFound />,
		children: [
			{ index: true, element: <Home /> },
			{ path: '/videos', element: <Videos /> },
			{ path: '/videos/:videoId', element: <VideoDetail /> },
		],
	},
]);

function App() {
	return <RouterProvider router={router} />;
}

• Outlet
  • 라우팅이 적용되는 부분
  • Outlet 밖에 있으면 라우팅 적용 안되는 컴포넌트 → 구분해서 사용할 수 있다

function Root(props) {
	return (
		<div>
			<Navbar />
			<Outlet />
		</div>
	);
}

---

[React JS] React Router v6

Picking a Router v6.6.2