개발 도구 (Development Tools)/React

[React] 라우터 사용방법 (react-router-dom@v6)

BiCute 2022. 5. 28. 10:00
반응형

 

#1 설치와 세팅

설치

터미널을 열고 아래 방식 중 원하는 방식으로 설치 

 

npm 설치

$ npm install react-router-dom@6

 

yarn 설치

$ yarn add react-router-dom@6

 

 

<BrowserRouter> 세팅

  index.js 파일을 열어 브라우저 상단에 BrowserRouter를 import 하고,

  <App />를 <BrowserRouter>로 감싸 주면 이제 앱 어디에서나 React Router를 사용할 수 있게 됩니다.

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

...

<React.StrictMode>
    <BrowserRouter>
        <App/>
    </BrowserRouter>
</React.StrictMode>

 

 

 

#2 기본 사용법

페이지 나누기

  App.js 파일의 상단에 Routes, Route, Link를 import 해옵니다.

  페이지가 변경되며 표시될 위치에 <Routes> 컴포넌트를 작성해주고, <Routes> 안에 <Route>를 넣어줍니다.

이 Route가 각각의 페이지라 생각하면 됩니다.

import * as React from "react";
import { Routes, Route, Link } from "react-router-dom";  // <-- 추가
import "./App.css";

function App() {
  return (
    <div className="App">
      <h1>Welcome to React Router!</h1>
      <Routes>                                    <-- 여기서부터 
        <Route path="/" element={<Home />} />
        <Route path="about" element={<About />} />
      </Routes>                                   <-- 여기까지 추가
    </div>
  );
}

 

Route에는 path와 element를 함께 작성해 주면 되는데,

해당 주소로 접속했을 때(path="주소") 보여줄 페이지의 내용(element={보여줄 내용})을 적어주시면 됩니다.


*¹ "/"는 기본 루트 페이지입니다.

*² element는 <div>등을 사용해 내용을 직접 입력해도 상관없지만... 내용이 많아지기 때문에 컴포넌트를 따로 만들어 컴포넌트를 넣어주는 편이 보기 좋습니다.

 

 

이제 해당 주소를 입력해보면 내용이 보이는데, 일반 사용자들은 어떤 주소가 있는지 알고 있을 리가 없기 때문에 해당 주소로 이어지는 Link 버튼을 만들어 줍니다.

 

 

페이지 링크 걸기

  페이지 이동 버튼은 Link to="이동할 주소" 형식으로 작성해 주면 됩니다.

// App.js
function Home() {
  return (
    <>
      <main>
        <h2>Welcome to the homepage!</h2>
        <p>You can do this, I believe in you.</p>
      </main>
      <nav>
        <Link to="/about">About</Link>
      </nav>
    </>
  );
}

function About() {
  return (
    <>
      <main>
        <h2>Who are we?</h2>
        <p>
          That feels like an existential question, don't you
          think?
        </p>
      </main>
      <nav>
        <Link to="/">Home</Link>
      </nav>
    </>
  );
}

  위 예문에서는 Home 컴포넌트는 루트 페이지에서 보이고 있으며, 해당 페이지에서 Link 버튼을 클릭하면 

Home 컴포넌트 대신 About 컴포넌트로 바뀌게 됩니다.

 

 

Not Found (404) Routes

  path="*"를 사용하게 되면 URL과 일치하는 경로가 아닌 다른 페이지를 방문하게 되었을 때, 해당 페이지를 보여줍니다.

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="dashboard" element={<Dashboard />} />
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}

 

 

 

#3 Navigation

useNavigate는 페이지 이동을 도와주는 Hook입니다.

 

사용방법은 

(1) 컴포넌트 상단에 useNavigate를 import 합니다.

(2) navitate를 선언한 후

(3) 원하는 위치에서 함수처럼 사용해줍니다.

import { useNavigate } from "react-router-dom";    // <-(1)- import

function App() {
  let navigate = useNavigate();    // <-(2)- navitate 선언
  
  return (
	<div className="App">
	...
    	// (3) 위에서 생성한 nativate 함수를 이용하여 설정 ()안에는 페이지 경로 지정
		<button onClick={() => {navigate(`/profile`);}}>프로필 페이지로 이동</button>    
	...
    </div>
  );
}

navigate를 이용하게 되면

Link 태그를 사용하였을 때 a 태그처럼 스타일이 변경되는 현상을 방지할 수도 있으며

useNavigate에 사용되는 인자들을 이용하여, 뒤로 가기를 눌렀을 때 이전이 아니라 홈으로 빠져나오는 등의 기능도 넣어줄 수 있습니다. 

 

또한 navigate를 이용하면 History 기능을 이용할 수도 있습니다. 

뒤로 가기 / 앞으로 가기 버튼과 비슷합니다. 

다음과 같이 사용합니다.

<button onClick={() => {navigate(-2);}}>2번 뒤로</button>
<button onClick={() => {navigate(-1);}}>뒤 페이지로</button>
<button onClick={() => {navigate(1);}}>앞 페이지로</button>
<button onClick={() => {navigate(2);}}>2번 앞으로</button>

 

 

 

#4 Nested Routes

 Nested Routes는 여러 페이지를 보여주고 싶지만, 페이지간에 큰 차이가 없을 경우에 사용하기 좋습니다.

 

사용방법

  Route를 바로 닫지 않고 그 안에 다른 Route들을 작성해 주는 것으로 중첩하여 경로를 지정해 줄 수 있습니다.

function App() {
  return (
    <Routes>
      <Route path="about" element={<About />}>
        <Route path="member" element={<Member />} />
        <Route path="location" element={<Location />} />
      </Route>
    </Routes>
  );
}

위와 같이 입력할 경우

위 3개의 Route는 각각

ㆍ /about

ㆍ /about/member

ㆍ /about/location

의 링크를 갖게 됩니다.

 

 

 

#5 Outlet

위에서 언급된 Nested Router를 사용하게 되면 동시에 여러 페이지를 보여주는 것이 가능합니다.
위의 예문을 기준으로 하면

member로 접속하게 될 경우, about페이지와 member페이지를 모두 보여줄 수 있으며

location으로 접속하게 되면, aboute페이지와 location 페이지를 모두 보여줄 수 있습니다.

 

사용방법

  상위 컴포넌트의 원하는 위치(하위 컴포넌트가 보일 위치)에 <Outlet />을 작성해주면 끝입니다.

import { Outlet } from "react-router-dom";    // <-- Outlet import

function About() {
  return (
    <div>
      <h1>About 페이지 내용</h1>
      <Outlet />    // <-- 원하는 위치에 Outlet
    </div>
  );
}

이렇게 작성하고 about/member로 접속하게 되면 about 페이지의 내용과 member 페이지의 내용이 모두 나타납니다.

 

 

 

#6 매개변수 사용하기

 

상품별로 정보가 따로 있을 경우 등 Route 페이지를 매번 만들어 줄 수 없는데, 이럴 때 매개변수(parameter)를 이용하여 링크를 생성할 수 있습니다.

 

사용 방법

  Route에는 :을 사용하여 스타일을 지정해 주면 뒤에 어떤 단어가 오더라도 해당 페이지로 연결이 됩니다.

  해당 상품 페이지 또한 자동으로 내용을 연동해 주기 위해서는

  해당 컴포넌트에서 useParams()를 사용하여 해당 ID값 등을 통해 정보를 불러오는 방식으로 사용할 수 있습니다.

import { Routes, Route, useParams } from "react-router-dom";    // <-- useParams를 import

function App() {
  return (
    <Routes>
        <Route path="/item/:id" element= {<Item />} />    // <-- :style 형식으로 지정
    </Routes>
  );
}

function Item() {
  let params = useParams();    // <-- useParams 선언
  return <h1>Item {params.ItemId}</h1>;  // <-- 값 가져오기
}

 

 

 

React-Router-Dom@v6 더 알아보기 >

반응형