[React] router

설치

install npm react-router-dom 로 설치해주고 사용할 파일에 import 한다.

✅ BrowserRouter

import { BrowserRouter } from 'react-router-dom';

...생략

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

위의 모습처럼 최상위 컴포넌트인 App컴포넌트를 감싸주면 App컴포넌트는 BrowserRouter를 사용할 수 있는 상태가 된다.

✅ Route: 특정 주소에 컴포넌트 연결하기

사용자가 요청하는 주소에 따라 다른 컴포넌트를 보여줘주기 위해서는 Route 라는 컴포넌트를 사용합니다.

<Route path="주소규칙" component={보여주고싶은 컴포넌트}>

👁 예제

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

const App = () => {
  return (
    <div>
      <Route path="/" exact={true} component={Home} />
      <Route path="/about" component={About} />
    </div>
  );
};

export default App;

exact 라는 props 를 true 로 설정하면 경로가 완벽히 똑같을때만 컴포넌트를 보여주게 됩니다.
이제 Home 컴포넌트는 정확히 path가 '/'일 때만 나오게 된다.

✅ Link: 누르면 다른 주소로 이동시키기

Link 컴포넌트는 클릭하면 다른 주소로 이동시키는 컴포넌트입니다.
리액트 라우터를 사용할땐 일반 a태그를 사용하시면 안됩니다.
그 대신에 그 대신에 Link 라는 컴포넌트를 사용해야합니다

<Link to="/about">소개</Link>

a태그로 작성 할 경우페이지가 완전히 새롭게 리로드된다. 링크의 이동 시에 전체 페이지를 리로드하는 대신 변화된 부분만 보여줄 있는 방법이 없을까에 대한 고민을 해결해주는 것이 바로 Link 기능이다.

👁 예제

import React from 'react';
import { Route, Link } 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="/" exact={true} component={Home} />
      <Route path="/about" component={About} />
    </div>
  );
};

export default App;