[React] react-router-dom: React에서 페이지 이동

 

React에서 페이지를 이동할 땐 <a> 태그가 아닌 <Link> 태그를 사용한다 

<a> 태그의 href 속성을 사용할 경우

• href 속성을 사용할 경우 HTML을 새롭게 불러오게 된다. 따라서 React의 state(상태)값과 렌더링 된 컴포넌트가 전부 초기화 된다.
• 이러한 방식은 서버에 새로운 HTML을 요청해 속도가 느릴 뿐 아니라, 단일 URL로 SPA(Single Page Application)로 사이트를 표현하는 React의 방식과 대치된다.
  
  

<Link> 태그의 to 속성을 사용할 경우

• React에서는 <a> 태그의 문제점을 보완할 수 있도록 react-router-dom 라이브러리의 <Link> 컴포넌트를 통해 페이지 이동을 하도록 지원한다.
• <Link> 를 사용할 경우 HTML을 초기화하지 않고 페이지를 이동할 수 있다.

 

예시

App.js

• react-router를 사용하기 위해 최상단에 <BrowserRouter>로 감싸준다

import React from 'react';
import {BrowserRouter} from 'react-router-dom';
import Header from './component/header/Header';
import Main from './component/Main';

const App = () => {
  return (
    <BrowserRouter>
      <div>
        <Header></Header>
        <Main></Main>
      </div>
    </BrowserRouter>
  );
};

export default App;

 

Main.js

• 이동할 컴포넌트(페이지)를 <Route> 컴포넌트로 감싸고 path 속성에 주소를 적어준다.
• 각 페이지를 변경(Swithching)할 수 있도록 <Router> 태그를 <Switch> 태그로 감싼다
• 아래는 Home, Download 두 개의 컴포넌트에 대해 Route로 감싸고 있다.
• Home 컴포넌트 주소의 exact path
  exact 키워드를 붙여줄 경우 해당 주소에 대해선 Home 컴포넌트만 보여준다는 뜻이 된다. 만약 exact를 지우면 Download의 path에도 '/' 키워드가 있어 Download 컴포넌트까지 함께 보여주게 된다.

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

const Main = () => {
  return (
    <main>
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/download">
          <Download />
        </Route>
      </Switch>
    </main>
  );
};

export default Main;

 

Header.js

• <Link to="주소"> 컴포넌트를 사용해 Home과 Download 컴포넌트로 이동할 수 있도록 연결해준다.
• to="주소"에는 Main.js에서 작성한 각 <Route> 컴포넌트의 path를 입력해준다.

import React from 'react';
import {Link} from 'react-router-dom';
const Header = () => {
  return (
    <header>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/Download">Download</Link>
            </li>
          </ul>
        </nav>
      </div>
    </header>
  );
};

export default Header;

 

공식 홈페이지

https://v5.reactrouter.com/web/guides/quick-start

Declarative routing for React apps at any scale | React Router