React: Как использовать Switch-маршруты

Что такое Switch и зачем он нужен?

Когда вы разрабатываете приложение на React, важно организовать его так, чтобы разные страницы загружались на основе URL-адреса. Библиотека react-router-dom делает это возможным. Однако бывают ситуации, когда несколько маршрутов могут совпадать с текущим URL. Например, маршрут /profile может сработать для /profile/edit, если не настроить точное соответствие. Вот здесь на помощь приходит Switch.

Switch — это компонент, который проверяет маршруты один за другим и загружает только первый подходящий. Это особенно полезно, если у вас есть маршруты с общими префиксами, которые могут пересекаться.

Настройка маршрутизации с помощью Switch

Прежде чем использовать Switch, нужно установить библиотеку react-router-dom, если она еще не добавлена в проект. Сделать это можно командой:

npm install react-router-dom

После установки создайте маршруты. Основной компонент приложения будет содержать BrowserRouter, Switch и несколько компонентов Route.

Пример использования Switch:

import React from 'react';  

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



const Home = () => <h1>Домашняя страница</h1>;  

const Profile = () => <h1>Профиль</h1>;  

const NotFound = () => <h1>Страница не найдена</h1>;  



function App() {  

  return (  

    <Router>  

      <Switch>  

        <Route exact path="/" component={Home} />  

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

        <Route component={NotFound} />  

      </Switch>  

    </Router>  

  );  

}  



export default App;

Объяснение:

1. Компонент Router оборачивает все маршруты, предоставляя им доступ к истории навигации.
2. Внутри Switch каждый маршрут проверяется на соответствие текущему URL.
3. Первый маршрут с exact path="/" отображает компонент Home. Это означает, что домашняя страница будет видна только при точном совпадении с /.
4. Если путь /profile, то загружается Profile.
5. Если ни один маршрут не совпал, будет загружен NotFound, так как он указан без path.

Как работает Switch в сложных случаях

Switch помогает избежать конфликтов маршрутов, когда пути пересекаются. Если не использовать exact, то маршрут /profile может срабатывать и для /profile/edit.

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

import React from 'react';  

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



const Profile = () => <h1>Профиль пользователя</h1>;  

const EditProfile = () => <h1>Редактировать профиль</h1>;  

const NotFound = () => <h1>Страница не найдена</h1>;  



function App() {  

  return (  

    <Router>  

      <Switch>  

        <Route exact path="/profile" component={Profile} />  

        <Route path="/profile/edit" component={EditProfile} />  

        <Route component={NotFound} />  

      </Switch>  

    </Router>  

  );  

}  



export default App;

Объяснение:

1. Первый маршрут с exact обрабатывает только путь /profile.
2. Второй маршрут работает для /profile/edit и загружает EditProfile.
3. Если пользователь вводит любой другой URL, загружается NotFound.

Когда Switch особенно полезен?

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

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

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