Правильный способ структурирования маршрутизатора реакта


Учебник по реакт-маршрутизаторам

Люди, только начинающие работать с 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
Войти в полноэкранный режим Выйти из полноэкранного режима

Что мы только что сделали?

  1. Создали каталог pages.
  2. Создали две директории внутри pages: Home и About.
  3. Созданы файлы 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;
Войти в полноэкранный режим Выйти из полноэкранного режима

Это довольно просто объяснить, мы создали два файла, которые представляют наши страницы.

Создание типов

Давайте создадим наши типы, выполнив следующие команды в терминале:

mkdir src/types
touch src/types/router.types.ts
Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь добавьте это в только что созданный файл types/router.types.ts:

export interface routerType {
  title: string;
  path: string;
  element: JSX.Element;
}
Enter fullscreen mode Выйти из полноэкранного режима

Что происходит?

Объявите тип для каждого маршрута:

Зачем объявлять типы?

Вскоре вы увидите, что объявление типов гарантирует, что каждый раз, когда мы добавляем объект страницы, он будет следовать строгому шаблону правил и не будет компилироваться с ошибками.

Создание маршрутизатора

Теперь мы создадим наш маршрутизатор.

Выполните эту команду в терминале:

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;
Войти в полноэкранный режим Выход из полноэкранного режима

Что происходит?

  1. Мы импортировали наши pages и types.
  2. Добавили title, path и element к каждому объекту.

Каждый раз, когда мы хотим добавить новую страницу, все, что нам нужно сделать, это добавить новый объект page в этот массив. Типы будут строгими, поэтому каждый из них должен содержать 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;
Вход в полноэкранный режим Выход из полноэкранного режима

И все готово! Спасибо, что прочитали.

Вот репозиторий Github.

Оцените статью
devanswers.ru
Добавить комментарий