Главная » React

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

На чтение 5 мин. Просмотров 64 Опубликовано

Содержание
  1. Учебник по реакт-маршрутизаторам
  2. Создание страниц
  3. Что мы только что сделали?
  4. Создание типов
  5. Что происходит?
  6. Зачем объявлять типы?
  7. Создание маршрутизатора
  8. Данные страниц
  9. Что происходит?
  10. Файл маршрутизатора
  11. Что происходит?
  12. Обновление файла приложения

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

Люди, только начинающие работать с 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
Добавить комментарий