[React] react router dom-v6 활용하기

Yeongju Yun·2022년 6월 17일
0

React

목록 보기
7/8

react router dom-v6

설치코드

npm install react-router-dom@6

BrowserRouter, Routes, Route

<BrowerRouter> 로 감싸서 Router Context를 만들어줘야 react router dom 을 활용할 수 있다. <Route> 안에 path를 지정하고 element에 렌더링할 컴포넌트를 넣으면 된다. <Routes> 는 Route로 생성된 자식컴포넌트 중에 path와 URL이 매칭되는 첫번째 Route의 컴포넌트를 렌더링한다.

* 같은 경우 와일드카드처럼 해당되는 모든 URL에 대해 대응한다. 이 때 순서가 중요한데, 만약 와일드카드로 지정한 <NotFound> 의 라우트가 상단에 배치될 경우, 다른 URL로 라우팅 되야하는 경우에도 <NotFound> 만 라우팅하게 된다. 이는 원래 의도한 동작과는 큰 차이가 있을 것이다.

import ReactDOM from "react-dom/client";
import {
  BrowserRouter,
  Routes,
  Route,
} from "react-router-dom";
// import your route components too

const root = ReactDOM.createRoot(
  document.getElementById("root")
);
root.render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />}>
        <Route index element={<Home />} />
        <Route path="teams" element={<Teams />}>
          <Route path=":teamId" element={<Team />} />
          <Route path="new" element={<NewTeamForm />} />
          <Route index element={<LeagueStandings />} />
          <Route path="/*" element={<NotFound />} />
        </Route>
      </Route>
    </Routes>
  </BrowserRouter>
);

Link를 이용해서 현재 페이지를 다른 페이지로 navigate 할 수 있다. Link의 한 종류인 <NavLink> 를 이용하면 navbar 중 활성화된 tab을 구현할 수 있다.

import * as React from "react";
import { Link } from "react-router-dom";

function UsersIndexPage({ users }) {
  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            <Link to={user.id}>{user.name}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

Hooks

useLocation

useLocationURLSearchParams를 사용해 queryString 방식으로 동적 라우팅을 구현할 수 있다.

useLocation은 location 객체를 반환하며, location객체의 search 속성값을 참고하면 queryString을 가져올 수 있다. URLSearchParams에 location.search를 인자로 넘기면 search는 url의 ? 뒤에 부분을 가져올 수 있다.

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

export default function Info({ info }) {
  const name = info.name;
  const navigate = useNavigate();

  const handleClick = () => {
    // queryString에 정보를 담아 detail 페이지로 넘겨줄 수 있다.
    navigate(`/detail?name=${info.name}&age=${info.age}`);
  };

  return <User onClick={handleClick}>{name}</User>;
}
import { useLocation } from "react-router-dom";

export default function Detail() {
  const location = useLocation();
  const search = new URLSearchParams(location.search);
  
  let name = search.get("name");
  let age = search.get("age");
  
  return (
    <div>
    	<div>User Detail</div>
    	<span>{name}</span>
    	<span>{age}</span>
    </div>
  )
}

useNavigate

useNavigate는 Link 컴포넌트를 사용하지 않고 페이지가 이동되도록 구현할 수 있다. 인자에 path를 넣어서 동작한다. 데이터를 넣어야할 경우 두 번째 인자에 state를 키로 하는 값으로 객체를 만들어 넣어주면 된다.

location.state를 활용하기 위해 navigate 함수의 첫 번째 인자로 이동할 페이지의 URL인 /detail을 전달하고 두 번째 인자로 state 를 전달합니다. 따라서 state로 info 객체를 전달한다.

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

export default function Info({ info }) {
  const name = info.name;
  const nav = useNavigate();

  const handleClick = () => {
    /* location.state에 정보를 담아 detail로 이동되도록 코드를 작성하세요. */
    nav("/detail", { state: info });
  };

  return <User onClick={handleClick}>{name}</User>;
}
export default function Detail() {
  const location = useLocation();
  const info = location.state;
  
  let name = info.name;
  let age =info.age;
  
  return (
    <div>
    	<div>User Detail</div>
    	<span>{name}</span>
    	<span>{age}</span>
    </div>
  )

useParams

Route의 path에 입력된 파라미터 userId를 useParams를 이용해서 받아올 수 있다.<Route path="/endpoint/:id /> 형식으로 path를 라우팅 경로를 지정해주어야 한다.

import * as React from 'react';
import { Routes, Route, useParams } from 'react-router-dom';

function ProfilePage() {
  // Get the userId param from the URL.
  let { userId } = useParams();
  // ...
}

function App() {
  return (
    <Routes>
      <Route path="users">
        <Route path="/users/:userId" element={<ProfilePage />} />
        <Route path="me" element={...} />
      </Route>
    </Routes>
  );
}

[참고링크]

React Router
참고 블로그
useLocation, searchParams

0개의 댓글