[TypeScript] React+TypeScript+react-router-dom-v6로 개발 시작하기

react+typescript 환경에서 최근 업데이트 된 react-router-dom의 v6를 이용하여

프로젝트의 생성, 페이지 라우팅 그리고 nav bar 구성까지의 과정이다.

 

 

 

React+TypeScript 로 개발 시작하기 https://mingmeng030.tistory.com/224

[TypeScript] React+TypeScript 로 개발 시작하기

 

react-router-dom v6  변경사항 살펴보기  https://mingmeng030.tistory.com/225

[React] react-router-dom v6 변경사항들 살펴 보기

 

1. 프로젝트 생성

  - 아래 두 가지 중 하나를 선택한다.

 

  [react project 생성]

  →typescript없이 React+react-router-dom-v6 두 가지로 시작 할 경우

 npx create-react-app [프로젝트명]

  [react+typescript project 생성]

  → React+TypeScript+react-router-dom-v6 세 가지로 시작 할 경우

npx create-react-app [프로젝트명] --template typescript

// 높은 버젼이라 안된다고 에러가 떠서 아래 명령어를 실행하니 정상적으로 설치되었다.
npx create-react-app [프로젝트명] --template=typescript

 

2. react-router-dom 설치

npm install react-router-dom v6

npm install react-router-dom @types/react-router-dom

npm install --save @types/react @types/react-dom

 

3. 라우터 구성

  AppRouter.tsx

import React, { useState, useEffect } from "react";
import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom";
import Main from "./main/Main";
import Board from "./board/Board";
import Login from "./login/Login";
import Navigation from "./component/Navigation";
import MyPage from "./mypage/MyPage";

const AppRouter = () => {
  return (
    <>
      <BrowserRouter>
        <Navigation />
        <Routes>
          <Route path="/main/*" element={<Main />} />
          <Route path="/board/*" element={<Board />} />
          <Route path="/login/*" element={<Login />} />
          <Route path="/mypage/*" element={<MyPage />} />
          <Route path="/" element={<Navigate replace to="/main" />} />
        </Routes>
      </BrowserRouter>
    </>
  );
};
export default AppRouter;

 

 

- Switch와 useHistory 등이 다른 것으로 대체되었다. v6를 사용하려면 몇 가지 수정사항들을 익혀야겠다.

 

4. Navigation.tsx

import React, { useState } from "react";
import { Link } from "react-router-dom";

const Navigation = () => {
  //image를 import하는 대신 require(path)를 통해 변수에 저장해준다.
  const logo = require("../static/logo.png");
  const [isLoggedIn, setIsLoggedIn] = useState<Boolean>(false);
  
  return (
    <nav className="nav">
      <div className="nav-logo">
        <Link to="/main">
          <img src={logo} />
        </Link>
      </div>

      <div className="nav-board">
        <Link to="/board">게시판</Link>
      </div>

      {!isLoggedIn? (
        <div className="nav-login">
          <Link to="/login" className="logIn-button">
            로그인
          </Link>
        </div>
      ) : (
        <>
          <div className="nav-user">
            <Link to="/mypage" className="nav-mypage">
              마이페이지
            </Link>
          </div>
          <button className="logOut-button">로그아웃</button>
        </>
      )}
    </nav>
  );
};

export default Navigation;

 

5. App.tsx

import React from "react";
import AppRouter from "./AppRouter";

function App() {
  return <AppRouter />;
}

export default App;