React Router - Data API를 사용하는 Router

 

Router 사용하는 순서는 아래와 같습니다.

1. App.js - router 생성 및 RouterPrivder 정의
2. routes 배열 정의 - path 및 element
3. 각 컴포넌트 정의

---

App.js - router 생성

- createBrowserRouter를 통한 Router 생성

- RouterPrivder 정의

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import routes from '@/routes/routes';
 
const router = createBrowserRouter(routes);
 
function App() {
    return <RouterProvider router={router} />;
}
 
export default App;

 

 

routes.js - path 및 element 정의

const routes = [
  {
    path: '/',
    element: <HomePage />,
  },
  {
    path: '/first',
    element: <FirstPage />,
  },
  {
    path: '/second',
    element: <SecondPage />,
  },
];
export default routes;

 

 

컴포넌트 정의 - HomePage.jsx

<RoundButton
   className="selected"
   onClick={() => {navigate('/first');}}>
   첫번째
</RoundButton>

 

컴포넌트 정의 - FirstPage.jsx

<RoundButton
   onClick={() => {navigate(-1)}}>
   뒤로가기
</RoundButton>
<RoundButton
   className="selected"
   onClick={() => {navigate('/second')}}>
   두번째
</RoundButton>

 

 

 

※참고 사이트

https://reactrouter.com/en/main/routers/create-browser-router

createBrowserRouter v6.7.0