React - Router 사용방법

 

리액트 라우터 라이브러리 설치

yarn add react-router-dom

 

 

프로젝트에 라우터 적용

src/index.js 파일 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter } from 'react-router-dom'

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

serviceWorker.unregister();

react-router-dom에 내장된 BrowerRouter 컴포넌트 이용
이 컴포넌트는 History API를 이용하여 페이지를 새로고침하지 않고도 주소를 변경하고, 현재 주소에 관련된 정보를 props로 쉽게 조회하거나 사용 가능하도록 함.

 

페이지 생성

Home.js 파일 생성

import React from 'react';

const Home = () => {
  return (
    <div>
      <h1>Home</h1>
      <p>Hellow World.</p>
    </div>
  );
};

export default Home;

 

About.js 파일 생성

import React from 'react';

const About = () => {
  return (
    <div>
      <h1>About</h1>
      <p>About</p>
    </div>
  );
};

export default About;

 

 

컴포넌트와 주소 연결

import React from 'react';
import { Route, Link, Switch } from 'react-router-dom';
import About from './About';
import Home from './Home';

const App = () => {
  return (
    <div>
      <ul>
        <li>
          <Link to="/">홈</Link>
        </li>
        <li>
          <Link to="/about">소개</Link>
        </li>
      </ul>
      <hr />
      <Route path="/" component={Home} exact={true} />
      <Route path="/about" component={About} />
    </div>
  );
};

export default App;

 

컴포넌트 하나에 여러개의 주소를 설정하고 싶을 경우 아래와 같이 작성한다.(리액트 라우터 V5 부터 적용가능)

   <Route path={['/about', '/info']} component={About} />

 

여기까지 완성한 경우 결과 화면

 

 

Switch

Switch 컴포넌트는 여러 Rout를 감싸 주소가 일치하는 단하나의 라우트만을 랜더링 시켜줌
규칙이 일치하지 않을 경우 Not Found 페이지 구현 가능

import React from 'react';
import { Route, Link, Switch } from 'react-router-dom';
import About from '.About';
import Home from '.Home';
import NoMatch from '.NoMatch';

const App = () => {
  return (
    <div>
      <ul>
        <li>
          <Link to="/">홈</Link>
        </li>
        <li>
          <Link to="/about">소개</Link>
        </li>
      </ul>
      <hr />
      <Switch>
        <Route path="/" component={Home} exact={true} />
        <Route path="/about" component={About} />
        <Route path="*" component={NoMatch} /> //일치하는 주소가 없을 경우 표시
      </Switch>
    </div>
  );
}

export default App;

 

NoMatch.js 파일 (Not Found 페이지)생성

import React from 'react';
import { useLocation } from "react-router-dom";

const NoMatch = () => {
    let location = useLocation();

    return (
      <div>
        <h3>
          No match for <code>{location.pathname}</code>
        </h3>
      </div>
    );
};

export default NoMatch;

 

경로가 일치하지 않을 경우 다음과 같이 표시됨

 

 

가이드 사이트

https://reacttraining.com/react-router/web/example/basic

React Router: Declarative Routing for React