Учебник по реакт-маршрутизаторам
Люди, только начинающие работать с 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;
Это довольно просто объяснить, мы создали два файла, которые представляют наши страницы.
Создание типов
Давайте создадим наши типы
, выполнив следующие команды в терминале:
mkdir src/types
touch src/types/router.types.ts
Теперь добавьте это в только что созданный файл types/router.types.ts
:
export interface routerType {
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
к каждому объекту.
Каждый раз, когда мы хотим добавить новую страницу, все, что нам нужно сделать, это добавить новый объект 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.