Router 적용, 기본사용법

Router 설치, 적용

yarn add react-router-dom

 

프로젝트에 라우터 적용

src/index.js파일에서 <BrowserRouter>컴포넌트를 적용해 전체적으로 router를 사용할 수 있게 한다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import {BrowserRouter} from 'react-router-dom';

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

 

Route 컴포넌트로 특정 경로에 원하는 컴포넌트 보여주기

Route컴포넌트를 통해 라우트 설정을 해야 하며, Route컴포넌트는 Routes컴포넌트 내부에서 사용되어야 한다.

< Route path = '주소규칙' element = { 보여줄 컴포넌트 JSX } >

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

const App = () => {
  return (
    <Routes>
      <Route path='/' element={<Home/>}/>
      <Route path='/about' element={<About/>}/>
    </Routes>
  )
}
export default App

 

Link 컴포넌트를 사용하여 다른 페이지로 이동하는 링크 보여주기

웹페이지에서 링크를 이동할 때 <a>태그를 사용한다.

하지만 리액트 라우터를 사용할 때에는 <a>태그를 바로 사용하면 안된다.

그 이유는 <a>태그를 클릭하여 페이지를 이동할 때, 브라우저에서 페이지를 새로 불러오기 때문이다.
라우터에서 사용하는 컴포넌트는 페이지를 새로 불러오는 것을 막고 History API를 통해 브라우저 주소의 경로만 바꿔준다

<Link to = '경로'> 링크 이름 </Link>

import { Link, Outlet } from "react-router-dom"

const Article = ()=> {
  return (
    <>
      <Outlet/>
      <ul>
        <li><Link to='/article/1'>게시글1</Link></li>
        <li><Link to='/article/2'>게시글2</Link></li>
        <li><Link to='/article/3'>게시글3</Link></li>
      </ul>
      <p><Link to='/'>홈으로</Link></p>
    </>
  );
};
export default Article;