React Роутер (Маршрутизатор)

Створення React App не включає маршрутизацію сторінок.

React Router є найпопулярнішим рішенням.

Додати маршрутизатор React

Щоб додати React Router у свою програму, запустіть це в терміналі з кореневого каталогу програми:

Структура папки

Щоб створити програму з кількома маршрутами сторінок, давайте спочатку почнемо зі структури файлу.

У папці src ми створимо папку під назвою pages з кількома файлами:

src\pages\:

• Layout.js
• Home.js
• Blogs.js
• Contact.js
• NoPage.js

Кожен файл міститиме базовий компонент React.

Основне використання

Тепер ми використаємо маршрутизатор у нашому файлі index.js.

import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Layout from "./pages/Layout";
import Home from "./pages/Home";
import Blogs from "./pages/Blogs";
import Contact from "./pages/Contact";
import NoPage from "./pages/NoPage";

export default function App() {
return (
<BrowserRouter>
  <Routes>
    <Route path="/" element={<Layout />}>
      <Route index element={<Home />} />
      <Route path="blogs" element={<Blogs />} />
      <Route path="contact" element={<Contact />} />
      <Route path="*" element={<NoPage />} />
    </Route>
  </Routes>
</BrowserRouter>
);
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Пояснення прикладу

Спочатку ми обертаємо наш вміст <BrowserRouter>.

Тоді ми визначаємо наш <Routes>. Додаток може мати кілька <Routes>. У нашому базовому прикладі використовується лише один.

<Route> можуть бути вкладеними. Перший <Route> має шлях / і відображає компонент Layout.

Вкладені <Route> успадковують і додають до батьківського маршруту. Тож шлях blogs поєднується з батьківським і стає /blogs.

Маршрут компонента Home не має шляху, але має атрибут index Це визначає цей маршрут як маршрут за замовчуванням для батьківського маршруту, яким є /.

Встановлення для path значення * діятиме як універсальне для всіх невизначених URL-адрес. Це підходить для сторінки помилки 404.

Сторінки / Компоненти

Компонент Layout має <Outlet> і елементи <Link>.

<Outlet> відображає поточний вибраний маршрут.

<Link> використовується для встановлення URL-адреси та відстеження історії веб-перегляду.

Щоразу, коли ми посилаємося на внутрішній шлях, ми використовуватимемо <Link> замість <a href="">.

"Маршрут макета" – це спільний компонент, який вставляє загальний вміст на всі сторінки, як-от навігаційне меню.

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

const Layout = () => {
return (
<>
  <nav>
    <ul>
      <li>
        <Link to="/">Home</Link>
      </li>
      <li>
        <Link to="/blogs">Blogs</Link>
      </li>
      <li>
        <Link to="/contact">Contact</Link>
      </li>
    </ul>
  </nav>

  <Outlet />
</>
)
};

export default Layout;

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

export default Home;

const Blogs = () => {
return <h1>Blog Articles</h1>;
};

export default Blogs;

const Contact = () => {
return <h1>Contact Me</h1>;
};

export default Contact;

const NoPage = () => {
return <h1>404</h1>;
};

export default NoPage;