Использование маршрутизации для табов и панелей

Что такое маршрутизация в контексте табов и панелей

Маршрутизация в React – это способ управлять состоянием и навигацией вашего приложения, предоставляя пользователям прямые ссылки на разные части интерфейса. Если у вас есть вкладки или панели, которые должны отображаться в зависимости от выбора пользователя, маршрутизация – это удобный способ реализовать эту функциональность.

Когда вы используете React Router для маршрутизации, вы:

1. Создаёте маршруты для разных состояний приложения.

2. Настраиваете компоненты, которые отображаются в зависимости от выбранного маршрута.

3. Даёте пользователям возможность легко переключаться между разными представлениями без полного обновления страницы.

Пример
Если вы создаёте приложение для управления задачами с вкладками, такими как "Все задачи", "Выполненные" и "Текущие", вы можете использовать маршрутизацию, чтобы при переходе между этими вкладками адрес страницы изменялся на /all, /completed или /current.

Настройка маршрутов для табов

Чтобы настроить маршрутизацию для табов, начните с установки библиотеки React Router. Она позволяет управлять навигацией внутри приложения и связывать определённые URL с компонентами.

Шаг 1. Установите React Router
Для начала добавьте библиотеку в свой проект:

npm install react-router-dom

Шаг 2. Настройте маршруты
Создайте компонент для маршрутов. Обычно это делается в файле App.js или другом главном компоненте:

import React from 'react';

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

import AllTasks from './AllTasks';

import CompletedTasks from './CompletedTasks';

import CurrentTasks from './CurrentTasks';



function App() {

  return (

    <Router>

      <div>

        <Routes>

          <Route path="/all" element={<AllTasks />} />

          <Route path="/completed" element={<CompletedTasks />} />

          <Route path="/current" element={<CurrentTasks />} />

        </Routes>

      </div>

    </Router>

  );

}



export default App;

Шаг 3. Добавьте табы
Для отображения табов используйте компонент <NavLink> из React Router:

import { NavLink } from 'react-router-dom';



function Tabs() {

  return (

    <div>

      <NavLink to="/all">Все задачи</NavLink>

      <NavLink to="/completed">Выполненные</NavLink>

      <NavLink to="/current">Текущие</NavLink>

    </div>

  );

}

Таким образом, каждая вкладка ведёт на свою страницу, а пользователь видит только соответствующий контент.

Работа с панелями через маршруты

Панели – это разделы приложения, которые отображают разные компоненты в зависимости от выбранного маршрута. Для реализации такой логики с помощью маршрутизации вы можете настроить родительский маршрут, который управляет дочерними компонентами.

Пример 1. Родительский маршрут с панелями
Создайте родительский компонент Dashboard, который будет включать в себя навигацию и области для панелей:

import React from 'react';

import { Outlet, NavLink } from 'react-router-dom';



function Dashboard() {

  return (

    <div>

      <nav>

        <NavLink to="/dashboard/overview">Обзор</NavLink>

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

      </nav>

      <div>

        <Outlet />

      </div>

    </div>

  );

}



export default Dashboard;

Пример 2. Настройка дочерних маршрутов для панелей
Добавьте маршруты для дочерних компонентов:

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

import Dashboard from './Dashboard';

import Overview from './Overview';

import Settings from './Settings';



function App() {

  return (

    <Router>

      <Routes>

        <Route path="/dashboard" element={<Dashboard />}>

          <Route path="overview" element={<Overview />} />

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

        </Route>

      </Routes>

    </Router>

  );

}



export default App;

Теперь пользователи могут переходить между панелями, и в адресной строке браузера будут отображаться ссылки /dashboard/overview и /dashboard/settings.

Советы по улучшению пользовательского интерфейса

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

1. Добавьте стилизацию для активных вкладок с помощью атрибута activeClassName компонента <NavLink>. Это поможет пользователям видеть, какая вкладка выбрана.

2. Используйте динамическую маршрутизацию, если у вас есть панели с уникальными идентификаторами (например, /dashboard/project/:id).

3. Обеспечьте работу с несуществующими маршрутами, добавив компонент "404 Страница не найдена".

Пример с динамическим маршрутом
Допустим, вы хотите открыть детали задачи по ID:

<Route path="/tasks/:id" element={<TaskDetails />} />

В компоненте TaskDetails вы сможете получить параметр id из маршрута:

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



function TaskDetails() {

  const { id } = useParams();



  return <div>Детали задачи с ID: {id}</div>;

}