[React] RouterProvider로 라우터들을 효과적으로 관리하자

▶RouterProvider로 라우터들을 효과적으로 관리하자

이번 글에서는 react-router-dom에 있는 RouterProvider를 이용하여 라우터들을 좀 더 가독성 있고 편리하게 관리하는 방법에 대해 알아보려고 합니다.

RouterProvider v6.8.0

 

🔎 RouterProvider

---

RouterProvider는 우리가 App.js에 <Routes> 하고 작성했던 많은 라우터들을 좀 더 가독성 있고 편리하게 관리할 수 있게 해주는데요.

아래와 같은 형태가 익숙할 것입니다.

<BrowserRouter>
    <Routes>
      <Route path="/" element={<HomePage />} />
      <Route path="/todo" element={<TodoPage />} />
    </Routes>
</BrowserRouter>

해당 코드를 바탕으로 RouterProvider를 적용하는 방법은 다음과 같습니다.

 

📌 RouterProvider 기본 사용하기

우선 관리하기 편하도록 src 폴더 안에 routes라고 폴더를 하나 만들어 줍니다.

src/routes

이제 파일을 생성해서 router와 관련된 코드를 작성해주면 됩니다.

 

📄 src/routes/routing.js 파일

import { createBrowserRouter } from 'react-router-dom';
import HomePage from '../pages/Home';
import TodoPage from '../pages/Todo';

const router = createBrowserRouter([
  {
    path: '/',
    element: <HomePage />,
  },
  {
    path: 'todo',
    element: <TodoPage />,
  },
]);

export default router;

위 코드를 보시면,

createBrowserRouter를 통해 리스트 안에 객체 형태로 라우터들을 관리하는데요.

createBrowserRouter v6.8.0

path에는 라우터 경로, element에는 컴포넌트를 작성해 줍니다.

이제 다시 App.js로 돌아와서 코드를 봅시다.

 

📄 src/App.js 파일

import { RouterProvider } from 'react-router-dom';

import router from './routes/routing';

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

export default App;

RouterProvider에게 우리가 미리 작성두었던 router를 import하여 전달해주면 끝입니다.