[React] react-router-dom 사용하기

01. react-router-dom 설치하기

npm 혹은 yarn 등의 패키지 모듈을 이용하여 react-router-dom 모듈을 설치한다.

#npm
npm install react-router-dom

#yarn
yarn add react-router-dom

 

02. BrowserRouter

react-router-dom에서 라우터를 사용하기 위해서는 BrowserRouter 기능을 사용해야한다.

index.js의 <App /> Tag를 아래와 같이 감싸주도록 하자.

 

src/index.js

//index.js

import React from "react"
import ReactDOM from "react-dom/client"
import { BrowserRouter } from "react-router-dom"
import App from "./App"

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
)

 

03. Routes, Route

라우터를 해주는 Route Tag를 Routes Tag 감싸준다.

속성 값으로는 path와 element로 각각 현재의 경로에 접속이 되면 해당 element(컴포넌트)를 빌드해준다.

 

src/app.js

//app.js

import { Route, Routes } from "react-router-dom";
import Goodbye from "./components/Goodbye";
import Hello from "./components/Hello";
import Main from "./components/Main";

export default function App() {
  return (
    <Routes>
      <Route path="/" element={<Main />}/>
      <Route path="/hello" element={<Hello />}/>
      <Route path="/goodbye" element={<Goodbye />}/>
    </Routes>
  )
}

 

src/components/Main.js

//Main.js

export default function Main () {
    return <h1>Welcome</h1>
}

 

src/components/Hello.js

//Hello.js

export default function Hello () {
    return <h1>Hello world</h1>
}

 

src/components/Goodbye.js

//Goodbye.js

export default function Goodbye () {
    return <h1>Good Bye</h1>
}

 

위의 코드를 보면 각각 아래와 같이 빌드 된다.

path	element(component)	내용
"/"	Main.js	Welcome
"/Hello"	Hello.js	Hello world
"/Goodbye"	Goodbye.js	Good Bye

 

04. Link

이제 어느 경로로 접근 했을 때 원하는 컴포넌트를 빌드가 가능해졌다.

하지만 그 경로에 접근하는 것은 아직 배우지 못 했는 데, html의 a Tag와 같은 역할을 하는 것이 Link이다.

Link Tag는 속성으로 To를 가지며, 클릭 했을 때 원하는 path로 지정해준다.

 

다른 파일은 그대로이며, App.js만 수정한다.

 

src/App.js

//App.js

import { Link, Route, Routes } from "react-router-dom";
import Goodbye from "./components/Goodbye";
import Hello from "./components/Hello";
import Main from "./components/Main";

export default function App() {
  return (
    <div>
      <ul>
        <Link to={"/"}><li>Home</li></Link>
        <Link to={"/hello"}><li>Hello</li></Link>
        <Link to={"/goodbye"}><li>GoodBye</li></Link>
      </ul>
      <Routes>
        <Route path="/" element={<Main />}/>
        <Route path="/hello" element={<Hello />}/>
        <Route path="/goodbye" element={<Goodbye />}/>
      </Routes>
    </div>
  )
}

 

위와 같은 코드를 짜면 아래의 Home, Hello, GoodBye를 각각 클릭 했을 때, 지정한 경로로 이동하게 된다.