React Router Dom 리액트 라우터 사용하기

React Router Dom 설치

React Router Dom 사용을 위해 모듈을 설치한다.

# yarn 설치
$ yarn add react-router-dom

# or npm 설치
$ npm install react-router-dom

 

Switch 설정

아래 3가지 경로를 설정한다.

• http://localhost:3000/about -> about에 관련된 내용
• http://localhost:3000/users -> 사용자 프로필에 관련된 내용
• http://localhost:3000/ -> 홈 화면

import { BrowserRouter, Link, Switch, Route } from 'react-router-dom'

function App() {
  return (
    <BrowserRouter>
      <div>
        <Switch>
          <Route path="/about">about</Route>
          <Route path="/users">users</Route>
          <Route path="/">home</Route>
        </Switch>
      </div>
    </BrowserRouter>
  )
}

• 상위에 BrowserRouter 컴포넌트로 감싸야함
• Switch 컴포넌트 안에 Route 컴포넌트를 이용하여 라우팅 switch 설정을 함
• Route 컴포넌트의 path 속성에 원하는 경로를 넣는다.

확인

올바르게 설정이 되었는지, 브라우저에서 아래 경로로 접속하여 확인한다.

• http://localhost:3000/about
• http://localhost:3000/users
• http://localhost:3000/

 

Switch 설정 확인

 

 

네비게이션 설정

보통 html에서는 navigation을 위한 link를 설정할 때, <a href=".."> 처럼 a 태그를 사용하지만,

React Router Dom 에서는 Link 컴포넌트를 사용한다.

import { BrowserRouter, Link, Switch, Route } from 'react-router-dom'

function App() {
  return (
    <BrowserRouter>
      <div>
        {/*네비게이션*/}
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        {/*라우팅 설정*/}
        <Switch>
          <Route path="/about">about</Route>
          <Route path="/users">users</Route>
          <Route path="/">home</Route>
        </Switch>
      </div>
    </BrowserRouter>
  )
}

 

확인

브라우저를 통해, 정상적으로 라우팅이 되는지 확인한다.

네비게이션 확인

 

좀 더 응용하자면, about, users, home처럼 단순히 텍스트가 아닌, 아래처럼 컴포넌트를 만들어서 원하는 화면을 띄울 수 있다.

<Switch>
  <Route path="/about"><About /></Route>
  <Route path="/users"><Users /></Route>
  <Route path="/"><Home /></Route>
</Switch>

 

---

다른 글

2020/12/22 - [React] - React Application을 Docker 빌드하고 배포하기 (MacOSX)

React Application을 Docker 빌드하고 배포하기 (MacOSX)

2020/11/05 - [React] - React에 eslint-config-airbnb, prettier 설정하기

React에 eslint-config-airbnb, prettier 설정하기

 

Reference 

reactrouter.com/web/guides/quick-start

React Router: Declarative Routing for React