Router Menual

Router Menual

React Router dom v6~

• Switch => Routes 으로 네이밍 변경
• exact 옵션 삭제
• component 방식 변경 (component={COM} 및 render={() => <h1>Hello<h1/>} 삭제)
• path 를 기존의 path="/Web/:id" 에서 path=":id" 로, 상대경로로 지정

라우트 구조

2022.05.16
Home
 ├── studyboard
 |   └── :id
 └── login

소스코드

import { Route, Routes } from "react-router-dom";
import styled from "styled-components";
import StudyBoard from "./pages/StudyBoard";
import Main from "./pages/Main";
import Login from "./pages/Login";
import NaviHeader from "./components/NaviHeader";
import StudyBoardRead from "./pages/StudyBoardRead";

const Router = () => {
  return (
    <>
      <NaviHeader />
      <BaseScreen>
        <Routes>
          <Route path="/" element={<Main />} />
          <Route path="/study-board" element={<StudyBoard />} />
          <Route path="/study-board/:id" element={<StudyBoardRead />} />
          <Route path="/login" element={<Login />} />
        </Routes>
      </BaseScreen>
    </>
  );
};

const BaseScreen = styled.div`
  width: 100%;
  max-width: 48rem;
  margin: 0 auto;
`;

export default Router;

코드 설명

모든 화면에 Navigation 사용, 컨텐츠 부분 레터박스 사용 위해 Router파일 안에 구성.

const NaviHeader = () => {
  const navigate = useNavigate();
  const { pathname } = useLocation();

  return (
    <>
      <Container>
        <Logo onClick={() => navigate("/")}>로고</Logo>
        <div>
          <MenuList>
            <MenuListContent
              isPathMatch={pathname === "/free-board" ? true : false}
            >
              자유게시판
            </MenuListContent>
            <MenuListContent
              isPathMatch={pathname === "/study-board" ? true : false}
              onClick={() => navigate("/study-board")}
            >
              스터디구인
            </MenuListContent>
            <MenuListContent
              isPathMatch={pathname === "/login" ? true : false}
              onClick={() => navigate("/login")}
            >
              로그인
            </MenuListContent>
          </MenuList>
        </div>
      </Container>
    </>
  );
};

사용 hooks

• pathname 가져와 styled-components와 결합 - useLocation
• React suspense와의 호환성을 더 높이기 위해 Link대신 useNavigate 사용.

useNavigate

아직 이전의 클릭이 로딩 중인 상태에서 다른 라우트로의 링크를 클릭한 경우 같이
pending이 충돌되는 경우에 더 부드러운 경험을 제공.
navigate API는 이전의 pending 작업을 알아차리고 해당 내용을 스택에 PUSH하는 것이 아니라
교체함으로써 로드되지 않은 기록으로 끝나지 않도록 한다.