반응 라우터를 구성하는 올바른 방법

React 라우터 튜토리얼

반응을 처음 접하는 사람들은 일반적으로 경로를 구성하는 방법을 모릅니다.

초보자와 엔트리 레벨 개발자는 다음과 같이 작성할 것입니다.

import "./App.css";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import Profile from "./pages/Profile";
import Checkout from "./pages/Checkout";
import Login from "./pages/Login";
import Maps from "./pages/Maps";
import Settings from "./pages/Settings";
import Store from "./pages/Store";

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/profile" element={<Profile />} />
        <Route path="/checkout" element={<Checkout />} />
        <Route path="/login" element={<Login />} />
        <Route path="/maps" element={<Maps />} />
        <Route path="/settings" element={<Settings />} />
        <Route path="/store" element={<Store />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

소규모 프로젝트에는 허용되지만 프로젝트가 확장되면 읽기가 매우 어려워집니다.

따라서 코드를 다음과 같이 리팩토링할 것입니다.

import "./App.css";
import { BrowserRouter } from "react-router-dom";
import Router from "./pages/router";

const App = () => {
  return (
    <BrowserRouter>
      <Router />
    </BrowserRouter>
  );
};

export default App;

더 깨끗하고 확장 가능하며 읽기 쉽습니다. 시작하겠습니다!

먼저 터미널에서 다음 명령을 실행하여 React에 typescript 앱을 만듭니다.

npx create-react-app router-tutorial --template typescript
cd router-tutorial

페이지 만들기

Home 및 About 두 페이지만 만들 것입니다.

터미널에서 다음 명령을 실행합니다.

mkdir src/pages
mkdir src/pages/Home src/pages/About
touch src/pages/Home/index.tsx src/pages/About/index.tsx

우리가 방금 무엇을 했습니까?

pages 디렉토리를 생성했습니다.

pages 내부에 Home 및 About라는 두 개의 디렉토리를 생성했습니다.

index.tsx 및 Home에 대한 About 파일을 생성했습니다.

pages/About/index.tsx 파일에 다음을 추가하십시오.

const About = () => {
  return (
    <div>
      <h1>About</h1>
    </div>
  );
};

export default About;

pages/Home/index.tsx 파일에 다음을 추가하십시오.

const Home = () => {
  return (
    <div>
      <h1>Home</h1>
    </div>
  );
};

export default Home;

이것은 꽤 자명합니다. 우리는 우리 페이지를 나타내는 두 개의 파일을 만들었습니다.

유형 만들기

터미널에서 다음 명령을 실행하여 types를 생성해 보겠습니다.

mkdir src/types
touch src/types/router.types.ts

이제 새로 만든types/router.types.ts 파일에 다음을 추가합니다.

export interface routerType {
  title: string;
  path: string;
  element: JSX.Element;
}

무슨 일이야?

각 경로에 대한 유형을 선언합니다.

title : 이것은 string가 됩니다.

path : 이것도 string

element : 이것은 JSX.Element가 됩니다.

유형을 선언하는 이유는 무엇입니까?

유형을 선언하면 페이지 개체를 추가할 때마다 엄격한 규칙 패턴을 따르고 오류를 컴파일하지 않는다는 것을 곧 알게 될 것입니다.

라우터 만들기

이제 라우터를 만들고 있습니다.

터미널에서 다음 명령을 실행합니다.

touch src/pages/router.tsx src/pages/pagesData.tsx

페이지 데이터

pages/pagesData.tsx에 추가:

import { routerType } from "../types/router.types";
import About from "./About";
import Home from "./Home";

const pagesData: routerType[] = [
  {
    path: "",
    element: <Home />,
    title: "home"
  },
  {
    path: "about",
    element: <About />,
    title: "about"
  }
];

export default pagesData;

무슨 일이야?

pages 및 types 를 가져왔습니다.

각 개체에 title , path 및 element를 추가했습니다.

새 페이지를 추가할 때마다 이 배열에 새 페이지 개체를 추가하기만 하면 됩니다. 유형은 엄격하므로 각각 title , path 및 element 를 포함해야 합니다.

라우터 파일

pages/router.tsx에 추가

import { Route, Routes } from "react-router-dom";
import { routerType } from "../types/router.types";
import pagesData from "./pagesData";

const Router = () => {
  const pageRoutes = pagesData.map(({ path, title, element }: routerType) => {
    return <Route key={title} path={`/${path}`} element={element} />;
  });

  return <Routes>{pageRoutes}</Routes>;
};

export default Router;

무슨 일이야?

pagesData.tsx 파일을 매핑하고 데이터의 각 개체에 대해 경로를 반환합니다.

앱 파일 업데이트

마지막으로 App.tsx를 업데이트합니다.

import "./App.css";
import { BrowserRouter } from "react-router-dom";
import Router from "./pages/router";

const App = () => {
  return (
    <BrowserRouter>
      <Router />
    </BrowserRouter>
  );
};

export default App;

그리고 우리는 모두 끝났습니다! 읽어 주셔서 감사합니다.

다음은 Githubrepo입니다.