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

Что такое React Router?

React Router — это мощная библиотека, обеспечивающая маршрутизацию в приложениях React. Это позволяет вам определять несколько маршрутов в вашем приложении и отображать определенные компоненты на основе пути URL. Эта возможность имеет решающее значение для создания одностраничных приложений (SPA), в которых навигация не требует полной перезагрузки страницы.

Установка React Router
Для начала вам необходимо установить React Router. Вы можете сделать это с помощью npm:

npm install react-router-dom

Настройка базовой маршрутизации

Давайте настроим простое приложение с несколькими маршрутами. Мы создадим приложение с домашней страницей, страницей «О нас» и страницей контактов.

1. Создание базовых компонентов
Сначала создайте три компонента: «Домой», «О программе» и «Контакты».

// Home.js
import React from 'react';

const Home = () => {
    return 
Home Page
;
};

export default Home;

// About.js
import React from 'react';

const About = () => {
    return 
About Page
;
};

export default About;

// Contact.js
import React from 'react';

const Contact = () => {
    return 
Contact Page
;
};

export default Contact;

2. Настройте маршрутизатор
Теперь давайте настроим маршрутизатор в вашем основном файле приложения, обычно App.js.

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';

const App = () => {
    return (
        
    );
};

export default App;

Объяснение:

• Router: компонент BrowserRouter охватывает все приложение, обеспечивая маршрутизацию.
• Ссылка: компонент «Ссылка» используется для создания навигационных ссылок, которые изменяют URL-адрес без перезагрузки страницы.
• Маршрут: компонент Route определяет путь и компонент, который будет отображаться при совпадении пути.
• Switch: компонент Switch гарантирует, что одновременно отображается только один маршрут.

Навигация между страницами
После завершения настройки вы можете перемещаться между страницами «Домой», «О программе» и «Контакты», щелкая ссылки в меню навигации. React Router обработает изменения URL-адреса и отобразит соответствующий компонент без обновления страницы.

Параметры маршрута
Вы также можете определять маршруты с параметрами, позволяющими передавать динамические данные. Например, давайте создадим компонент «Пользователь», который отображает информацию о пользователе на основе идентификатора пользователя в URL-адресе.

1. Создайте пользовательский компонент
Пользователь.js:

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

const User = () => {
    const { userId } = useParams();
    return 
User ID: {userId}
;
};

export default User;

2. Обновите маршрутизатор
Добавьте маршрут для компонента User в свой App.js:

Вложенные маршруты

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

Пример вложенных маршрутов:

1. Создайте компонент Dashboard с вложенными маршрутами:

// Dashboard.js
import React from 'react';
import { Route, Link, Switch } from 'react-router-dom';
import Settings from './Settings';
import Profile from './Profile';

const Dashboard = () => {
    return (
        

            
Dashboard
            
    );
};

export default Dashboard;

1. Обновите App.js, включив в него маршрут Dashboard:

теперь при переходе к /dashboard/profile или /dashboard/settings соответствующие компоненты отображаются на панели мониторинга.

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

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

В следующем посте мы углубимся в использование React Hooks, уделив особое внимание useEffect и тому, как с его помощью можно управлять побочными эффектами в функциональных компонентах. Следите за обновлениями!