[React] Route에서 <Link /> 사용하기

1. <Link> 

<a> 태그는 링크를 클릭하면 새로운 요청을 서버(리액트 앱을 호스팅 하는 서버)로 전달한다. 그리고 서버가 응답을 보내면 라우터가 어떤 페이지를 로딩할지 다시 판단해야 한다. 링크가 동작하지만, 다른 링크로 옮기려고 서버에 요청을 보내면서 이미 실행되고 있는 리액트 애플리케이션을 완전히 나가게 되는 것이다.  그래서 서버에 새로운 요청을 보내지 않고 react-router-dom에서 제공하는 Link컴포넌트를 사용할 수 있다.  

Link는 react-router-dom에서 내부적으로 <a>의 클릭 리스너를 추가하고 클릭시 브라우저가 서버로 요청하는 것을 방지하고 옮겨 가려는 경로의 URL을 해석해서 브라우저의 URL창을 변경한다. 그러면 서버로 요청을 보내지 않고 적절한 컴포넌트를 화면에 로드할 수 있다. 

 

2. Link태그 컴포넌트에 적용하기

MainNavigation 컴포넌트를 만든다!! 

import { Link } from 'react-router-dom'

function MainNavigation() {
  return <header>
    <div>React Meetpus</div>
    <nav>
      <ul>
        <li><Link to='/'>All Meetups</Link></li>
        <li><Link to='/new-meetup'>Add New Meetup</Link></li>
        <li><Link to='/favorites'>My Favorites</Link></li>
      </ul>
    </nav>

  </header>
}

export default MainNavigation;

그 후에  App.js에 MainNavigation 컴포넌트를 추가해준다! 

import { Routes, Route } from 'react-router-dom'

import AllMeetupPage from './pages/AllMeetup';
import NewMeetupPage from './pages/NewMeetup';
import FavoritesPage from './pages/Favorites';
import MainNavigation from './component/layout/MainNavigation';

function App() {
  return <div>
    <MainNavigation />
    <Routes>
      <Route path='/' element={<AllMeetupPage />} />
      <Route path='/new-meetup' element={<NewMeetupPage />} />
      <Route path='/favorites' element={<FavoritesPage />} />
    </Routes> 
  </div>;
}

export default App;

 

참고: 

1. React Router v6 업데이트 정리

React Router v6 업데이트 정리

2. React Router v6 튜토리얼

React Router v6 튜토리얼