[react-router-dom] 리액트 라우터 설치 및 세팅

안녕하세요! 프뚜입니다.

 

리액트에서 화면 이동 또는 전환을 하기 위해선 react-router-dom을 설치해야합니다.

---

[개발 환경]

- OS: Windows 10 64Bit

- React: 18.2.0

---

# react-router-dom

npm install react-router-dom

---

# router.js 파일 생성하기

import { createBrowserRouter } from "react-router-dom";
import React from "react";

export default createBrowserRouter([
  {
    path: "/",
    element: <div>Root</div>,
  }
]);

./src/router/router.js 파일을 생성합니다. 모든 path는 여기서 관리하도록 하겠습니다.

---

# index.js에 router 연결하기

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import React from 'react';
import ReactDOM from 'react-dom/client';
import {RouterProvider} from "react-router-dom";
import router from './router/router';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <RouterProvider router={router} />
);

<RouterProvider router={ router } />로 모든 라우터들은 router.js에서 관리하도록 합니다.

---

# children을 통해 원하는 영역만 변경하기

import { createBrowserRouter, Outlet } from "react-router-dom";
import React from "react";

export default createBrowserRouter([
  {
    path: "/",
    element: <div>Root<br/><Outlet/></div>,
    children: [
      {
        path: "contact",
        element: <div>Contact</div>,
      },
    ]
  }
]);

/contact path에 접근하면 /의 element와 contact의 element를 사용할 수 있습니다. 이때 children의 element를 사용하기 위해선 <Outlet/> 태그를 사용해야 합니다.

---

# PathVariable 사용하기

import { createBrowserRouter, Outlet } from "react-router-dom";
import React from "react";
import Path from "../pages/Path";

export default createBrowserRouter([
  {
    path: "/",
    element: <div>Root<br/><Outlet/></div>,
    children: [
      {
        path: "path/:id/:name",
        element: <Path />,
      },
    ]
  }
]);

/path/:id/:name path를 생성합니다. /path다음에 들어오는 값은 id로 매핑이 되고 이후 들어온 값은 name에 매핑될 수 있게 path를 생성합니다.

---

Path.js 생성하기

import {useParams} from "react-router-dom";

const Path = () => {
    const params = useParams();

    return (
        <div>
            {JSON.stringify(params)}
        </div>
    );
}

export default Path;

useParams를 통해 PathVariable이 정상적으로 매핑됨을 확인할 수 있습니다.

---