React Router사용환경 세팅과 BrowserRouter,Switch, Route, Link컴포넌트 사용법

 

 

React Router 사용환경 세팅

create-react-app  설치한 프로젝트파일안으로 들어가서

React Router 라이브러리 설치

$ npm install react-router-dom@5.3.0

package.json 파일 "dependencies"하단을 보면 react-router-dom 설치가 잘 되었는지 확인할 수 있다. 

 

 

App.js상단에 react-router 컴포넌트 꺼내오기위한

import구문 작성

import React from "react";
import { BrowserRouter, Switch, Route, Link } from "react-router-dom";

 

 

BrowserRouter

새로고침하지않고도 주소를 변경할 수 있도록 해줌

BrowserRouter가 상위에 작성되어 있어야 Route 컴포넌트를 사용할 수 있음

function App () {
  return (
   <BrowserRouter> // 상위에 위치시키기
      <div>
        <nav>
          <ul>
            <li>
              Home
            </li>
            <li>
              MyPage
            </li>
            <li>
              Dashboard
            </li>
          </ul>
        </nav>
      </div>
   </BrowserRouter>
  )
}

export default App;

 

 

 

Switch, Route

Switch 컴포넌트는 여러 Route컴포넌트를 감싸서 그 중 경로가 일치하는 단 하나의 라우터만 렌더링을 시켜준다.

Switch를 사용하지 않으면 매칭되는 모든 요소를 렌더링한다.

Route 컴포넌트는 path 속성을 지정하여 해당 path에 어떤 컴포넌트를 보여줄지 정한다. 

function App () {
  return (
   <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              Home
            </li>
            <li>
              MyPage
            </li>
            <li>
              Dashboard
            </li>
          </ul>
        </nav>

    {/* 주소경로와 밑에 만든 3개의 컴포넌트를 연결해줍니다. */}
      <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/mypage"> {/* 경로를 설정하고 */}
            <MyPage /> {/* 컴포넌트를 연결합니다. */}
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
      </div>
   </BrowserRouter>
  )
}

// Home 컴포넌트
function Home() {
  return <h1>Home</h1>;
}

// MyPage 컴포넌트
function MyPage() {
  return <h1>MyPage</h1>;
}

// Dashboard 컴포넌트
function Dashboard() {
  return <h1>Dashboard</h1>;
}

export default App;

<Route exact path="/"> 에서 볼 수 있는 exact

React router의 특성상. exact속성이 없으면 해당 경로(예시의 "/")로 시작하는 중복된 <Route> 컴포넌트를 모두 보여줌

exact는 주어진 경로와 정확히 일치하는 Route 컴포넌트를 보여주는 역할

exact없이 Switch에서의 순서로 페이지를 전환할 수도 있다. 

위에서부터 아래로 경로를 하나씩 검사하며 라오트를 실행하기때문에, 중복되지않는 라오트주소를 위로 올려주고 "/"는 가장 아래로 내리면 exact의 효과를 볼 수 있다. 

 

 

 

Link

경로를 연결해주는 역할을 하는 컴포넌트

페이지를 새로 불러오지않고 페이지의 주소만 변경해줌

Link 의 to 속성을 활용하여 Route 컴포넌트에 설정해준 path 주소를 연결해주어야한다.

 

function App() {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>{/* Link 컴포넌트를 이용하여 경로연결 */}
            </li>
            <li>
              <Link to="/mypage">MyPage</Link>
            </li>
            <li>
              <Link to="/dashboard">Dashboard</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/mypage">
            <MyPage />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
      </div>
    </BrowserRouter>
  );
}

function Home() {
  return <h1>Home</h1>;
}

function MyPage() {
  return <h1>MyPage</h1>;
}

function Dashboard() {
  return <h1>Dashboard</h1>;
}

export default App;

 

 npm run start 을 통해 서버를 구동해보면 작동하는것을 확인할 수 있다.