[React] react-router-dom v6

react-router-dom

리액트를 위한 라우팅 라이브러리, 사용자가 원하는 경로로 보내는 과정.

 

 

사용법

 

BrowserRouter는 리액트에서 Routes를 사용할 수 있게 해주는 컴포넌트, Routes와 Route 는 실제로 라우팅 경로를 지정하게 해주는 컴포넌트

 

여기서 path로 경로를 설정하고, element는 경로가 일치할 경우 렌더링할 컴포넌트를 지정한다.

 

 

useNavigate() 훅

페이지 이동을 위해 제공하는 훅

파라미터로 이동할 path를 넣어주면 된다.

 

 

https://reactrouter.com

Home v6.26.1 | React Router

더 자세한 걸 보고 싶다면 해당 사이트에서...

 

 

실습 : App.js 수정

App 컴포넌트는 가장 처음으로 렌더링되는 컴포넌트이다.

import React from "react";
import {
  BrowserRouter,
  Routes,
  Route
} from "react-router-dom";
import styled from "styled-components";
import MainPage from "./component/page/MainPage";
import PostWritePage from "./component/page/PostWritePage";
import PostViewPage from "./component/page/PostViewPage";

const MainTitleText = styled.p`
  font-size: 24px;
  font-weight: bold;
  text-align: center;
`;

function App(props) {
  return (
    <BrowserRouter>
      <MainTitleText>미니 블로그</MainTitleText>
      <Routes>
        <Route index element={<MainPage />} />
        <Route path="post-write" element={<PostWritePage />} />
        <Route path="post/:postId" element={<PostViewPage />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

마지막 Route를 보면 경로에 :postId가 보이는데, 콜론을 사용하는 경우 실제 컴포넌트에서 useParams() 훅을 사용해 아이디 파라미터 값을 가져올 수 있다.