Понимаем Nested Routes в React Router: Руководство для начинающих

Что такое Nested Routes и почему они важны?

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

Вложенные маршруты позволяют:

1. Организовать логику маршрутизации и сделать её более интуитивной. Например, маршруты /profile и /profile/settings логически связаны, и вложение их друг в друга отражает эту связь.

2. Управлять компонентами на основе URL без излишних условий. Вместо проверки состояния компонента, вложенные маршруты автоматически рендерят нужные подкомпоненты.

3. Улучшить навигацию, предоставив пользователю чёткий путь через приложение.

Пример: Если у вас есть страница блога с комментариями, можно настроить маршруты так, чтобы /blog рендерил список статей, а /blog/:id/comments — комментарии конкретной статьи.

Как настроить Nested Routes?

Настройка вложенных маршрутов начинается с компонента <Routes> и компонента <Route>. Каждый маршрут может иметь дочерние маршруты, которые рендерятся внутри родительского компонента. Чтобы это работало, нужно указать место для рендеринга дочерних компонентов с помощью компонента <Outlet>.

Шаги настройки Nested Routes:

Создайте маршруты в App.js, где родительский маршрут содержит дочерние. Например:

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

import Home from "./Home";

import Profile from "./Profile";

import Settings from "./Settings";



function App() {

  return (

    <Router>

      <Routes>

        <Route path="/" element={<Home />}>

          <Route path="profile" element={<Profile />}>

            <Route path="settings" element={<Settings />} />

          </Route>

        </Route>

      </Routes>

    </Router>

  );

}



export default App;

Используйте <Outlet> в компоненте родителя, чтобы рендерить дочерние маршруты. Например, в компоненте Profile.js:

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



function Profile() {

  return (

    <div>

      <h1>Профиль пользователя</h1>

      <Outlet />

    </div>

  );

}



export default Profile;

Теперь, если вы посетите /profile/settings, сначала отобразится компонент Profile, а внутри него — компонент Settings.

Пример: Когда пользователь переходит на /profile/settings, он видит заголовок "Профиль пользователя" и настройки. Если убрать <Outlet>, настройки не будут отображаться.

Передача параметров и организация навигации

Nested Routes поддерживают параметры, что делает их идеальными для динамической маршрутизации. Например, если вам нужно отображать профиль конкретного пользователя, вы можете использовать параметр :id.

Настройте маршрут с параметром в App.js:

<Route path="profile/:id" element={<Profile />} />

Получите параметр с помощью хука useParams в компоненте Profile.js:

import { useParams } from "react-router-dom";



function Profile() {

  const { id } = useParams();

  return <h1>Профиль пользователя с ID: {id}</h1>;

}



export default Profile;

Организуйте переходы между вложенными страницами с помощью компонента <Link>:

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



function Navigation() {

  return (

    <nav>

      <Link to="/profile">Профиль</Link>

      <Link to="/profile/settings">Настройки</Link>

    </nav>

  );

}

Теперь пользователи могут переходить на /profile или /profile/settings, а параметры URL помогут динамически отображать данные.

Пример: Если вы хотите добавить кнопку "Вернуться", используйте <Link> с динамическим путём:

<Link to={`/profile/${id}/settings`}>Настройки профиля</Link>