React Router 돌아보기

리엑트에서 SPA 관리를 위해 사용하는 라이브러리인 React-router-dom 의 몇가지 기능을 알아보자.

리엑트라우터 설치

npm install react-router-dom

라우터 파일을 따로 관리하여 경로를 설정해 줄 수 있다.

1. 경로 네스팅

예제

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import AuthLayout from "./pages/Auth/AuthLayout";
import Main from "./pages/Main/Main";
import CreateTodo from "./pages/Main/CreateTodo";
import Blank from "./pages/Main/Blank";
import TodoLayout from "./pages/Main/TodoLayout";
import ModifyForm from "./pages/Main/ModifyForm";
import DetailForm from "./pages/Main/DetailForm";

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<AuthLayout />} />
        <Route element={<Main />}>            ----------------- "1"
          <Route path="/" element={<Blank />} /> 
          <Route element={<TodoLayout />}>    ----------------- "2"
            <Route path="/detail/:id" element={<DetailForm />} />
            <Route path="/modify/:id" element={<ModifyForm />} />
          </Route>
          <Route path="/create" element={<CreateTodo />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

위의 코드에서 1,2 부분은 라우트 컴포넌트로 묶여있는데

자식 컴포넌트들은 부모컴포넌트에서 <Outlet/> 태그를 활용해서

부모컴포넌트 내에서 자식컴포넌트들을 보여지게 만들어 줄 수 있다.

//main.tsx

<TodoMain>
     <TodoMenu>
       <TodoTitle to={"/"}>TodoList</TodoTitle>
       <TodoButtonWrapper>
         <CreateButton onClick={goCreate}>생성하기</CreateButton>
       </TodoButtonWrapper>
     </TodoMenu>
     <TodoListWrapper>
       <TodoLists>
         {todoList.length !== 0 &&
           todoList.map((listItem) => {
             return (
               <TodoList listItem={listItem} key={listItem.id}></TodoList>
             );
           })}
       </TodoLists>
       <TodoDetail>
         <Outlet />
       </TodoDetail>
     </TodoListWrapper>
   </TodoMain>

이렇게 만들어주게 된다면 페이지가 이동되더라도 나머지부분은 그대로 나타내지며

<Outlet/>태그 내용만 main 아래의 route 내용으로 바뀌게 된다.

2. useNavigate

네비게이트 훅을 이용하여 페이지를 이동시킬 수 있다.

const navigate = useNavigate();

로 navigate 함수를 활용할 수 있다.

navigate('/') : 해당경로로 이동
navigate(-1) : 이전페이지로 이동
navigate('/', {replace:true}) : 해당경로로 이동하고 이력을 남기지 않음(뒤로가기되지않음)