(React) React-Router-Dom V6 업그레이드

호두파파·2022년 2월 11일

React react router dom

React

목록 보기

28/39

반드시 공식 문서를 읽어보실 것을 권장드립니다!
공식문서 보기

주요 변화 요약

Switch 대신 Router로 변경
중첩 라우터에서 Outlet 컴포넌트를 사용해서 구현할 수 있다.
useLocation : pathname을 가져와서 styled-components와 결합할 수 있다.
useRoutes Hook을 통해 child의 child도 정의할 수 있다. (기존에는 react-route-config을 별도로 설치해야 가능했음)
useHistory 대신 useNavigate로 이름이 변경되었다.

Switch 대신 Routes 사용하기

Switch가 Routes로 변경되었다.
Components를 불러오는 방식도 변경되었는데, 에로우 펑션을 활용해 컴포넌트를 전달하던 방식에서 element로 바로 component를 전달한다.

예제보기

// v5까지의 방식 

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" component={() => <Home />} />
        <Route exact path="/write" component={() => <Write />} />
        <Route component={() => <div>Page Not Found</div>} />
      </Switch>
    </BrowserRouter>
  );
}

// v6방식 
const Router = () => {
  return (
    <BrowserRouter>
      <Header />
      <Routes>
        <Route path="/" element={<Main />} />
        <Route path="/page1/*" element={<Page1 />} />
        <Route path="/page2/*" element={<Page2 />} />
        <Route path="/*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
};

중첩 라우팅

App.js에서 중첩 라우터를 사용하고, 중첩 라우터에서 Outlet 컴포넌트를 사용가능하다.

App.js에서 자식 태그로 중첩하는 라우터를 기재하고, Web.js에서 Outlet 라이브러리를 통해 가져온다.

// App.js
const App = () => {
  return (
    <BrowserRouter>
      <Header />
      <Routes>
        <Route path="/" element={<Main />} />
        <Route path="/page1/*" element={<Page1 />} />
        <Route path="/page2/*" element={<Page2 />} />
        <Route path="/*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
};

// Web.js
import { Link, Routes, Route, Outlet } from "react-router-dom";

const Web = () => {
  return (
    <div>
      <h1>This is Web</h1>
      <ul>
        <li>
          <Link to="1">Post #1</Link>
        </li>
        <li>
          <Link to="2">Post #2</Link>
        </li>
        <li>
          <Link to="3">Post #3</Link>
        </li>
        <li>
          <Link to="4">Post #4</Link>
        </li>
      </ul>
      <Outlet />
    </div>
  );
};

export default Web;

useLocatio

pathname을 가져와 styled-components와 결합하기

import React from "react";
import { Link, useLocation } from "react-router-dom";
import styled from "styled-components";

const HeaderWrapper = styled("header")`
  margin-bottom: 30px;
`;
const List = styled("ul")`
  display: flex;
`;
const Item = styled("li")`
  margin-right: 20px;
  text-transform: uppercase;
  font-weight: 600;
  color: ${(props) => (props.selected ? "white" : "black")};
  background-color: ${(props) => (props.selected ? "#f1c40f" : "white")};
`;

const Header = () => {
  const { pathname } = useLocation();
  return (
    <HeaderWrapper>
      {/* header 태그 */}
      <List>
        {/* ul 태그 */}
        <Item selected={pathname.startsWith("/web")}>
          {/* li 태그 */}
          <Link to="/web">Go to Web</Link>
        </Item>
        <Item selected={pathname === "/design"}>
          <Link to="/design">Go to Design</Link>
        </Item>
        <Item selected={pathname === "/server"}>
          <Link to="/server">Go to Server</Link>
        </Item>
      </List>
    </HeaderWrapper>
  );
};
export default Header;

useRoutes

child의 child까지 자식 컴포넌트들을 랜더링하기 위해
react-router-config를 별도로 설치해 사용했다면 이제는 useRoutes Hook을 사용해 구성할 수 있다.

function App() {
  let element = useRoutes([
	// Route에서 사용하는 props의 요소들과 동일
    { path: "/", element: <Home /> },
    { path: "dashboard", element: <Dashboard /> },
    {
      path: "invoices",
      element: <Invoices />,
	 // 중첩 라우트의 경우도 Route에서와 같이 children이라는 property를 사용
      children: [
        { path: ":id", element: <Invoice /> },
        { path: "sent", element: <SentInvoices /> }
      ]
    },
	// NotFound 페이지는 다음과 같이 구현할 수 있음
    { path: "*", element: <NotFound /> }
  ]);
	// element를 return함으로써 적절한 계층으로 구성된 element가 렌더링 될 수 있도록 함
  return element;
}

< Routes>는 useRoutes를 감싼 wrapper라고 공식문서라고 언급하는데, 공식문에서는 이 둘 모두를 권장한다.

useHisroty 대신 useNavigate

v6부터는 navigate라는 명칠을 사용한다. history.push와 history.replace 모두 navigate라는 명칭으로 사용한다.

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

function App() {
  let navigate = useNavigate();
  function handleClick() {
    navigate("/home");
  }
  return (
    <div>
      <button onClick={handleClick}>go home</button>
    </div>
  );
}