react-router-dom v6

react-router-dom v6

공식문서 ↓↓↓

https://reactrouter.com/docs/en/v6/getting-started/overview

React Router | Quick Start

• react-router-dom v6은 React Hook을 많이 사용하므로 React 16.8 버전이상을 사용해야 한다/
• v5에서 사용하던 Switch가 Routes로 변경되었고 exact 옵션 대신 url 뒤에 /*를 붙여서 사용한다
• component를 넣어줄 때 component 대신 element를 사용한다
• 중첩 라우팅이 굉장히 사용하기 편해졌다

v5 사용법 ↓↓↓

https://duckgugong.tistory.com/191

react-router-dom v5

---

설치

• 우선 react-router-dom을 설치하자

yarn add react-router-dom@6

---

BrowserRouter 적용하기

• App.js나 index.js에 BrowserRouter를 적용하자

import { BrowserRouter } from "react-router-dom"

• BrowserRouter
  →  react-router-dom 내장 컴포넌트로 HTML5의 History API를 사용하여 페이지 새로고침 없이 주소변경, props 내려주기를 할 수 있도록 한다.
  → 웹 브라우저가 가지고 있는 주소 관련 정보를 props로 넘겨주는 것이다.
  → 현재 내가 어느 주소를 보고 있는 지 쉽게 알 수 있게 도와준다
  
  

index.js

import 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>
);

reportWebVitals();

 

혹은

App.js

import { BrowserRouter } from "react-router-dom"
const App = (props) => {
  console.log(props)
  return (
    <BrowserRouter>
      <div>Duckgugong</div>
    </BrowserRouter>
  );
}

export default App;

 

 

---

기본 Route 적용하기

• Route를 적용시키기 위해서 Route와 Routes를 임포트해야 한다.

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

<Routes>

• 여러 <Route/> 컴포넌트를 감싸서 그 중 규칙이 일치하는 라우트 하나만 렌더링 시켜준다.

<Route>

• path에 경로(URL), element 속성에 렌더링 시키고 싶은 컴포넌트를 넣어준다.

- 넘겨줄 props가 없을 때

<Route path="[주소]" element={[보여줄 컴포넌트]}/>

• 만약 /food 주소에 Home 컴포넌트를 보여주고 싶으면 아래처럼 작성하자

<Route path="/food" element={<Food/>}/>

• 혹은 주소 앞에 "/"를 생략해도 된다!

<Route path="/food" element={<Food/>}/>

- 넘겨줄 props가 있을 때 (중요!!!)

• props는 여러개 넘길 수 있다!

<Route path="[주소]" element={<[컴포넌트 이름] [props이름]=[데이터]/>}/>

• 만약 /food 주소에 data라는 props에 "hungry"를 넘기고 Food 컴포넌트를 보여주고 싶으면 아래처럼 작성하자.

<Route path="/food" element={<Food data="hungry"/>}/>

- 뒤에 아무 주소나 붙이고 싶을 때 /*

• 경로 뒤에 어떠한 경로가 와도 될 때 경로 뒤에 /*를 붙이자!!
• 예를 들어 Route의 path가 /food/*라면 /food/12123/234255/43535435?a=1#2341와 같은 주소가 와도 /food에 해당하는 컴포넌트가 렌더링된다!!
• 또한, /food?a=123 처럼 바로 쿼리 스트링을 사용해도 /food에 해당하는 컴포넌트가 렌더링된다!

<Route path="/food/*" element={<Food/>}/>

예시

• / 경로에서는 Home 컴포넌트를 보여주자
• /food 경로로 이동하면 Food 컴포넌트를 보여주고 props로 data="hungry"를 넣어서 /food 경로로 이동했을 때, Food 컴포넌트에서 출력해보자

App.js

import { Routes, Route } from "react-router-dom"
import Food from "./Food";
import Home from "./Home";
const App = (props) => {
  return (
    <>
      <Routes>
        <Route path="/" element={<Home/>}/>
        <Route path="/food" element={<Food data="hungry"/>}/>
      </Routes>
    </>

  );
}
export default App;

Home.js

const Home = (props) => {
    return(<h1>Home</h1>);
}
export default Home;

Food.js

const Food = (props) => {
    // data: "hungry" 출력
    console.log(props)
    return (
        <>
            <h1>Chicken</h1>
        </>
    );
}
export default Food;

---

useParams() - URI 파라미터

• Route의 path뒤에 /:[매개변수]로 URI 파라미터를 사용할 수 있다
• 만약 아래처럼 설정하고 그냥 /food로 URL을 바꾸면 안된다!!

<Route path="/food/:id" element={<Food/>}/>

• Route의 element 안에 들어간 컴포넌트에서 useParams 훅을 이용해서 URI 파라미터를 받을 수 있다.

const params = useParams()

• 만약 /food/:id에 /food/123 URL을 보내면 아래처럼 접근이 가능하다

const {id} = useParams();
console.log(id);
// 123

예시

• URL파라미터를 화면에 띄워보자

App.js

import { Routes, Route } from "react-router-dom"
import Food from "./Food";
import Home from "./Home";
const App = (props) => {
  return (
    <>
      <Routes>
        <Route path="/" element={<Home/>}/>
        <Route path="/food/:id" element={<Food/>}/>
      </Routes>
    </>
  );
}
export default App;

Food.js

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

const Food = (props) => {
  const {id} = useParams()
  console.log(id)
  return (
    <>
      <h1>{id}</h1>
    </>
  );
}
export default Food;

---

useLocation - 현재 주소 정보, 쿼리 스트링

• useLocation 훅을 사용하면 현재 주소 정보에 대한 정보를 얻을 수 있다!
• useLocation의 구성요소는 다음과 같다!
  • pathname : 현재 주소 경로
  • search : ?가 포함된 쿼리스트링
  • hash : 주소의 #문자열 뒤의 값
  • state : 페이지로 이동시 임의로 넣을 수 있는 상태 값
  • key : location 객체의 고유 값, 초기값은 default, 페이지가 변경될 때 마다 고유의 값이 생성된다.

 

• 만약 경로가 /food/HIHIHI123/123123/235252?a=123#dd 인 컴포넌트에서 useLocation() 훅을 이용해서 출력을 해보면 아래처럼 나온다!

예시

• /food 경로 뒤에 아무 경로나 붙여서 useLocation을 이용해서 데이터를 출력해보자

App.js

import { Routes, Route } from "react-router-dom"
import Food from "./Food";
import Home from "./Home";
const App = (props) => {
  return (
    <>
      <Routes>
        <Route path="/" element={<Home/>}/>
        <Route path="/food/*" element={<Food/>}/>
      </Routes>
    </>

  );
}
export default App;

Food.js

import {useLocation} from "react-router-dom";

const Food = (props) => {
  const location = useLocation();
  console.log(location)
  return (
    <>
      <h1>Chicken</h1>
    </>
  );
}
export default Food;

---

useSearchParams - 쿼리스트링

• react-router-dom v6부터 useSearchParmas를 이용해서 쿼리스트링을 쉽게 다룰 수 있다.
• useSearchParams 는 배열 타입의 값을 반환하며, 첫번째 원소는 쿼리파라미터를 조회하거나 수정하는 메서드들이 담긴 객체를 반환한다.
  첫번째 원소의 get 메서드를 통해 특정 쿼리파라미터를 조회할 수 있고, set 메서드를 통해 특정 쿼리파라미터를 업데이트 할 수 있다.

 

• 예를 들어 경로가 /food?name=duck&age=27이라면 아래 코드 name, age에 각각 duck과 27이 들어간다!

const [searchParams, setSearchParams] = useSearchParams();
const name = searchParams.get('name');
const age = searchParams.get('age');

• 만약 조회시에 쿼리파라미터가 존재하지 않는다면 null 로 조회된다.
• 두번째 원소는 쿼리파라미터를 객체형태로 업데이트할 수 있는 함수를 반환합니다.

※ 주의사항 ※

• 쿼리파라미터를 사용할 때 주의할 사항은 쿼리 파라미터를 조회한 값은 문자열이다.
• 즉, true 또는 false 값을 넣게 된다면 값을 비교할 때 꼭 'true' 와 같이 따옴표로 감싸서 비교를 해야 하고, 숫자를 다루게 된다면 parseInt 를 사용하여 숫자 타입으로 변환을 해야한다!

예시

• 쿼리 파라미터 name과 age에 값을 넘겨서 useSearchParams로 각각 name 과 age의 값을 받아서 화면에 출력하자

App.js

import { Routes, Route } from "react-router-dom"
import Food from "./Food";
import Home from "./Home";
const App = (props) => {
  return (
    <>
      <Routes>
        <Route path="/" element={<Home/>}/>
        <Route path="/food" element={<Food/>}/>
      </Routes>
    </>

  );
}
export default App;

Food.js

import {useSearchParams} from "react-router-dom";

const Food = (props) => {
  const [searchParams, setSearchParams] = useSearchParams();
  // 쿼리파라미터 name, age 값 조회
  const name = searchParams.get('name');
  const age = searchParams.get('age');
  return (
    <>
      <h1>name = {name}</h1>
      <h1>age = {age}</h1>
    </>
  );
}
export default Food;

---

useNavigate - 경로 이동

• 특정 이벤트가 발생할 때, URL을 조작할 수 있는 인터페이스를 제공한다.
• 예를 들어 어떤 버튼을 클릭하면 특정 URL로 이동하거나 뒤로가기 기능 등등..

경로 이동

• navigate의 파라미터로 이동할 경로를 넣어준다.

const navigate = useNavigate();
navigate([경로]);

• 예를 들어 아래 button을 클릭하면 /food로 이동한다

<button onClick={() => {navigate('/food');}}>
  /food로 가기
</button>

• 또한, navigate의 경로로 정수를 넣을 수 있는데 -1이면 뒤로가기 -2면 뒤로 두번가기 1이면 앞으로가기 이런 식으로 넣을 수 있다.

 

const navigate = useNavigate();
// 뒤로가기
navigate(-1);
// 뒤로 두번
navigate(-2);
// 앞으로 가기
navigate(1);​

• 예를 들어 아래 button을 클릭하면 뒤로 이동한다.

<button onClick={() => { navigate(-1);}}>
  뒤로 가기
</button>

예시

• /에서 /food로 이동하는 버튼을 만들고 /food에서 /name로 이동하는 버튼을 만들고 /name에서 뒤로가기 버튼과 /로 가는 버튼을 만들어보자

App.js

import { Routes, Route } from "react-router-dom"
import Food from "./Food";
import Home from "./Home";
import Name from "./Name";
const App = (props) => {
  return (
    <>
      <Routes>
        <Route path="/" element={<Home/>}/>
        <Route path="/food" element={<Food/>}/>
        <Route path="/name" element={<Name/>}/>
      </Routes>
    </>

  );
}
export default App;

Home.js

import {useNavigate} from "react-router-dom";

const Home = (props) => {
  const navigate = useNavigate();
  return (
    <>
      <h1>Home</h1>
      <button onClick={() => {
        navigate('/food');
      }}>
        /food로 가기
      </button>
    </>
  );
}
export default Home;

Food.js

import {useNavigate} from "react-router-dom";

const Food = (props) => {
  const navigate = useNavigate();

  return (
    <>
      <h1>Chicken</h1>
      <button onClick={() => {
        navigate('/name');
      }}>
        /name으로 이동
      </button>
    </>
  );
}
export default Food;

Name.js

import {useNavigate} from "react-router-dom";

const Food = (props) => {
  const navigate = useNavigate();

  return (
    <>
      <h1>Chicken</h1>
      <button onClick={() => {
        navigate('/name');
      }}>
        /name으로 이동
      </button>
    </>
  );
}
export default Food;