Реактивный маршрутизатор

Приложение Create React не включает маршрутизацию страниц.

React Router — самое популярное решение.

Добавить React-маршрутизатор

Чтобы добавить React Router в ваше приложение, запустите его в терминале из корневого каталога приложения:

Структура папок

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

Внутри srcпапки мы создадим папку pagesс несколькими файлами:

src\pages\:

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

Каждый файл будет содержать очень простой компонент React.

Основное использование

Теперь мы будем использовать наш Router в нашем index.jsфайле.

import ReactDOM from "react-dom";
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>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

Объяснение примера

Сначала мы обертываем наш контент с помощью <BrowserRouter>.

Затем мы определяем наш <Routes>. Приложение может иметь несколько <Routes>. В нашем базовом примере используется только один.

<Route>s могут быть вложенными. Первый <Route>имеет путь / и отображает Layoutкомпонент.

Вложенные <Route>s наследуют и добавляют к родительскому маршруту. Таким образом, blogsпуть объединяется с родителем и становится /blogs.

Маршрут Homeкомпонента не имеет пути, но имеет indexатрибут. Это указывает этот маршрут как маршрут по умолчанию для родительского маршрута, то есть /.

Установка pathto *будет действовать как универсальное средство для любых неопределенных 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;