[React] Router

김현주·2022년 5월 17일

목록 보기

12/12

⭐ 공식문서 확인
→ https://reactrouter.com/

1. react-router-dom 설치

① 터미널에 npm install react-router-dom@6 입력
② src/index.js 파일에 BrowserRouter를 import한 후 App을 감싸준다.

// index.js
import * as React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";

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

2. Router

① BrowserRouter

위의 예시와 같이 프로젝트에 리액트 라우터를 적용할 때 사용한다.
웹 애플리케이션에 HTML5의 History API를 사용하여 페이지를 새로고침하지 않고도 주소를 변경하고, 현재 주소에 관련된 정보를 props로 쉽게 조회하거나 사용할 수 있도록 해준다.

②

3. Components

① Routes, Route

// App.js
import { Routes, Route } from 'react-router-dom';

function App(){
  return(
    <>
      <Routes>
        <Route path="/" element={ <Home /> } /> // 메인페이지
        <Route path="/About" element={ <About /> } /> // About페이지
      </Routes>
    </>
  )
}
export default App;

Route 컴포넌트
1) 특정 주소에 컴포넌트를 연결한다.
2) Routes, Route 를 import 한다.
3) <Routes>를 만든 후 그 안에 <Route>을 넣어준다.
4) <Route path="/url경로" element={ <보여줄HTML> } /> 을 적어준다.

② Link

// App.js
import { Link } from 'react-router-dom';

function App(){
  return(
    <>
      <ul>
        <li>
          <Link to="/">HOME</Link>
        </li>
        <li>
          <Link to="/About">ABOUT</Link>
        </li>
      </ul>
      <Routes>
        <Route path="/" element={ <Home /> } />
        <Route path="/About" element={ <About /> } />
      </Routes>
    </>
  )
}
export default App;

Link 컴포넌트
1) 클릭하면 다른 주소로 이동시켜주는 컴포넌트이다.
2) 페이지 전환을 방지하는 기능이 내장되어 있다.
3) 페이지를 새로 불러오지 않고 페이지의 주소만 변경해준다.
a태그
1) 페이지를 전환하는 과정에서 페이지를 새로 불러온다.
2) 랜더링 된 컴포넌트들이 모두 사라지고 다시 처음부터 랜더링된다.

③ Outlet

// App.js
import { Routes, Route, Outlet } from 'react-router-dom';
import About from './About';
import AboutLocation from './AboutLocation';
import AboutHistory from './AboutHistory';

function App(){
  return(
    <>
      <Routes>
        <Route path="/About" element={ <About /> }>
          <Route path="location" element={ <AboutLocation /> } />
            // path="/About/location" 와 같음
          <Route path="history" element={ <AboutHistory /> } />
            // path="/About/history" 와 같음
        </Route>
      </Routes>
    </>
  )
}
export default App;

function About(){
  return(
    <>
      <h1>About 페이지 입니다</h1>
      <Outlet />
    </>
  )
}
export default About;

자식요소인 <AboutLocation>와 <AboutHistory>를 렌더링하려면 부모요소에서 <Outlet />의 자리에 들어간다고 생각하면 된다.
유사한 내용의 서브페이지를 만들 때 사용한다.

⭐ nested routes
→ 쉽게 생각하면 Route안에 Route를 사용하는 것이다.
→ 위와 아래는 같은 뜻 이다.

// App.js
<>
  <Route path="/About" element={ <About /> } />
  <Route path="/About/location" element={ <AboutLocation /> } />
  <Route path="/About/history" element={ <AboutHistory /> } />
</>
<>
  <Route path="/About" element={ <About /> }>
    <Route path="location" element={ <AboutLocation /> } />
    <Route path="history" element={ <AboutHistory /> } />
  </Route>
</>

4. Hooks

① useNavigate

// App.js
import { useNavigate } from 'react-router-dom';

function App(){
  let navigate = useNavigate();
  
  return(
    <>
      <button onClick={ ()=>{ navigate(-1) } }>한번뒤로이동</button>
      <button onClick={ ()=>{ navigate(2) } }>앞으로두번이동</button>
      <button onClick={ ()=>{ navigate('/') } }>메인페이지로이동</button>
    </>
  )
}
export default App;

v5의 useHistory를 대신하여 사용한다.
Link 태그와 유사한 작업을 하는 Hook이다.
replace 사용 : navigate(to, { replace: true })
state 사용 : navigate(to, { state })

② useParams

/* 예시) /ProductList/Product/0일 경우 첫 번째 상품을 보여주고,
        /ProductList/Product/1일 경우 두 번째 상품을 보여준다. */
// App.js
import { Routes, Route, useParams } from 'react-router-dom';

function App(){
  reutnr(
    <>
      <Routes>
        <Route path="/ProductList">
          <Route path="Product/:userId" element={ <Product /> } />
        </Route>
      </Routes>
    </>
  )
}
export default App;

// Product.js
function Product(){
  // URL로 부터 userId 매개변수를 가져온다.
  let { userId } = useParams();
  // ...
}