React Router

React Router

• 리액트에서 쉽게 라우팅(routing)을 구현할 수 있게 해주는 라이브러리

설치

$ yarn add react-router-dom

기본 설정

다양한 Router를 제공하는데, 우선 제일 기본적인 <BrowserRouter>를 사용하여 구현하였다.
먼저 Index page에서 <BrowserRouter>로 감싸준다.

index.js

import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(
	document.getElementById('root')
);
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

이후 App.js 파일에서 <Routes> 컴포넌트를 추가해주고, <Route> 컴포넌트를 추가하여 path 에는 URL 경로, element 에는 매칭하고싶은 컴포넌트를 추가해준다.

<Route path="경로" element={ 컴포넌트 } />

// 'http://localhost:3000/'  url에 Home 컴포넌트를 매칭 
<Route path="/" element={<Home />} />

App.js

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

const App = () => {
  return (
    <div>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </div>
  );
};

export default App;

Link

• 다른 주소로 이동시켜주는 컴포넌트
• <a> 태그 사용시에는 페이지를 새로 불러오기 때문에 렌더링된 컴포넌트들이 사라진다 → <Link> 컴포넌트 사용
  

<Link to={이동경로}> 링크 표시 </Link>

App.js

const App = () => {
  return (
    <div>
      <ul>
        <li>
          <Link to="/">홈</Link>
        </li>
        <li>
          <Link to="/about">소개</Link>
        </li>
      </ul>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </div>
  );
};

URL Parameter

<Route path="/path/:param_name" element={<Component />}></Route>

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

const Component = () => {
	const params = useParams();
	// const { param_name } = useParams();
}

Profile.js

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

const Profile = () => {
  const { username } = useParams();
  const profile = data[username];
  if (!profile) {
    return <div>존재하지 않는 사용자입니다.</div>;
  }

  return (
    <div>
      <h3>
        {username}({profile.name})
      </h3>
      <p>{profile.description}</p>
    </div>
  );
};

export default Profile;

App.js

import Profile from './Profile';

const App = () => {
  return (
    <div>
			...
      <Routes>
				...
        <Route path="/profile/:username" element={<Profile />}></Route>
      </Routes>
    </div>
  );
};

export default App;

useNavigate

• react-router v6부터에서 useHistory → useNavigate 로 변경되었다.

const navigate = useNavigate();

// /home 으로 이동
<button onClick={() => navigate('/home')}>Go Home</button>

// 현재 페이지 기록 삭제 + /home으로 이동
<button onClick={() => navigate('/home', {replace: true})}>Go Home with replace</button>

<button onClick={() => navigate(-2)}>Go 2 pages back</button>
<button onClick={() => navigate(-1)}>Go back</button>
<button onClick={() => navigate(1)}>Go forward</button>
<button onClick={() => navigate(2)}>Go 2 pages forward</button>