Как сделать роутинг для вложенных страниц?

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

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

Шаг 1: Установите и настройте React Router
Сначала вам нужно установить пакет React Router с помощью npm или yarn:

npm install react-router-dom

или

yarn add react-router-dom

После установки вам нужно настроить роутер в вашем главном компоненте App.js:

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

function App() {
  return (
    <Router>
      <Switch>
        {/* здесь вы можете добавлять ваши маршруты */}
      </Switch>
    </Router>
  );
}

export default App;

Шаг 2: Создайте вложенные компоненты страниц
Теперь вам нужно создать вложенные компоненты страниц, которые будут отрисовываться при переходе по соответствующим маршрутам. Например, давайте создадим компоненты для HomePage, AboutPage и ContactPage:

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

function HomePage() {
  return (
    <div>
      <h1>Домашняя страница</h1>
      <p>Добро пожаловать на домашнюю страницу!</p>
      <Link to="/about">О нас</Link>
      <Link to="/contact">Контакты</Link>
    </div>
  );
}

function AboutPage() {
  return (
    <div>
      <h1>О нас</h1>
      <p>Мы команда разработчиков, специализированных в React!</p>
      <Link to="/">Домой</Link>
      <Link to="/contact">Контакты</Link>
    </div>
  );
}

function ContactPage() {
  return (
    <div>
      <h1>Контакты</h1>
      <p>Свяжитесь с нами по следующим контактам:</p>
      <Link to="/">Домой</Link>
      <Link to="/about">О нас</Link>
    </div>
  );
}

export { HomePage, AboutPage, ContactPage };

Шаг 3: Добавьте маршруты в главном компоненте App.js
Теперь вам нужно добавить маршруты в ваш главный компонент App.js. Компонент Switch обертывает все маршруты и позволяет отобразить только один из них, соответствующий текущему URL. Компонент Route представляет собой отдельный маршрут, который будет сопоставляться с URL и отображать соответствующий компонент.

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import { HomePage, AboutPage, ContactPage } from './pages';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={HomePage} />
        <Route path="/about" component={AboutPage} />
        <Route path="/contact" component={ContactPage} />
      </Switch>
    </Router>
  );
}

export default App;

Шаг 4: Навигация по страницам
Теперь у вас есть роутинг для вложенных страниц. Вы можете добавить ссылки на эти страницы в ваших компонентах, чтобы позволить пользователям переходить по страницам. В примере выше мы использовали компонент Link из React Router для создания ссылок.

<Link to="/about">О нас</Link>
<Link to="/contact">Контакты</Link>

Вот и все! Теперь ваше приложение React будет иметь роутинг для вложенных страниц. Пользователи могут навигировать по различным страницам вашего приложения, и каждая страница будет отображаться без перезагрузки всей страницы.