[React.js] 라우터 설정 방법 (React Router)

라우터 설정 방법 (React Route)

들어가며

• React Router(react-router-dom)을 이용하여 라우터를 설정하는 방법을 정리해본다.

 

방법

패키지 설치하기

• react-router-dom 패키지를 설치하려면 터미널에 아래 명령을 실행한다.

			
			
			
		
$ npm install react-router-dom    # yarn add react-router-dom

 

방법 1

• createBrowserRouter를 이용하는 방법이다.

			
			
			
		
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";
 
import HomePage from "./pages/Home";
import ProductsPage from "./pages/Products";
 
const router = createBrowserRouter([
  { path: "/", element: <HomePage /> },
  { path: "/products", element: <ProductsPage /> },
]);
 
function App() {
  return <RouterProvider router={router} />;
}
 
export default App;

 

방법 2

• createRoutesFromElements, createBrowserRouter를 이용하는 방법이다.
• 라우터들을 정의할 때, <Route> 태그로 라우팅할 컴포넌트들을 감싸준다. 

			
			
			
		
import {
  createBrowserRouter,
  createRoutesFromElements,
  RouterProvider,
  Route,
} from "react-router-dom";
 
import HomePage from "./pages/Home";
import ProductsPage from "./pages/Products";
 
const routeDefinitions = createRoutesFromElements(
  <Route>
    <Route path="/" element={<HomePage />} />
    <Route path="/products" element={<ProductsPage />} />
  </Route>
);
 
const router = createBrowserRouter(routeDefinitions);
 
function App() {
  return <RouterProvider router={router} />;
}
 
export default App;