ReactJS - BrowserRouter: руковод BEGINNERS Guide to Routing in React

Привет, начинающие разработчики React! Сегодня мы отправимся в увлекательное путешествие в мир routing в приложениях React. Не волнуйтесь, если вы новички в программировании; я буду вашим доброжелательным проводником, explaining everything step by step. Так что налейте себе чашечку кофе и погружайтесь с нами!

ReactJS - BrowserRouter

Основные концепции маршрутизации

Что такое маршрутизация?

Представьте, что вы находитесь в большой библиотеке. Вы хотите найти конкретную книгу, но не знаете, где она находится. Вот где на помощь приходит библиотечный каталог. Он tells you exactly который стеллаж нужно смотреть. В веб-приложениях маршрутизация работает аналогичным образом. Это как карта, которая tells your app который компонент отображать на основе URL.

Why do we need routing?

Давайте представим, что вы создаете личный сайт с разными страницами: Home, About и Contact. Без маршрутизации вам пришлось бы вручную показывать и скрывать компоненты на основе действий пользователя. Это утомительно и error-prone. Маршрутизация автоматизирует этот процесс, делая ваше приложение более структурированным и удобным для пользователя.

Введение в BrowserRouter

В мире React у нас есть потрясающий инструмент под названием BrowserRouter. Он является частью библиотеки react-router-dom и помогает нам реализовать маршрутизацию в наших приложениях React. Представьте его как personal librarian вашего приложения, который всегда готов направить пользователей к правильной "книге" (или в нашем случае, компоненту).

Какapply маршруты

Теперь, когда мы понимаем концепцию, давайте脏 our hands с некоторыми кодами!

Шаг 1: Установка

В первую очередь, нам нужно установить пакет react-router-dom. Откройте ваш терминал и запустите:

npm install react-router-dom

Шаг 2: Настройка BrowserRouter

Давайте начнем с того, чтобы обернуть наш main App компонент BrowserRouter. Вот как:

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';

const Root = () => (
<Router>
<App />
</Router>
);

export default Root;

В этом примере мы import BrowserRouter и переименовываем его в Router для простоты. Затем мы оборачиваем наш App компонент в Router. Это устанавливает контекст маршрутизации для всего нашего приложения.

Шаг 3: Определение маршрутов

Теперь давайте определим некоторые маршруты в нашем App компоненте:

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

const App = () => (
<div>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</div>
);

export default App;

Давайте разберем это:

Мы import Route и Switch из react-router-dom.
Switch обеспечивает то, что только один маршрут отрисовывается за один раз.
Каждый Route компонент определяет соответствие между URL-путем и React-компонентом.
Проп exact на маршруте home обеспечивает то, что он соответствует только exact пути "/".

Шаг 4: Создание навигации

Теперь давайте добавим навигацию в наше приложение:

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

const Navigation = () => (
<nav>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/contact">Contact</Link></li>
</ul>
</nav>
);

export default Navigation;

Здесь мы используем компонент Link из react-router-dom. Он resembles an <a> тег, но предотвращает перезагрузку страницы при навигации.

Шаг 5: Объединение всего вместе

Давайте обновим наш App компонент, чтобы включить навигацию:

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Navigation from './components/Navigation';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

const App = () => (
<div>
<Navigation />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</div>
);

export default App;

И вот оно! Базовое приложение React с настроенной маршрутизацией.

Продвинутые техники маршрутизации

Теперь, когда мы рассмотрели основы, давайте посмотрим на некоторые более продвинутые техники:

1. URL-параметры

Иногда вы хотите передать данные через URL. Например, страница профиля пользователя:

<Route path="/user/:id" component={UserProfile} />

В вашем UserProfile компоненте вы можете получить доступ к параметру id следующим образом:

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

const UserProfile = () => {
let { id } = useParams();
return <h1>User Profile for user {id}</h1>;
};

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

Вы можете вложить маршруты в компонентах. Это полезно для сложных макетов:

const App = () => (
<div>
<Navigation />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/users" component={Users} />
</Switch>
</div>
);

const Users = () => (
<div>
<h1>Users</h1>
<Switch>
<Route exact path="/users" component={UserList} />
<Route path="/users/:id" component={UserProfile} />
</Switch>
</div>
);

3. Программная навигация

Иногда вы хотите navigate программно, например, после отправки формы:

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

const LoginForm = () => {
let history = useHistory();

const handleSubmit = () => {
// ... handle login logic
history.push('/dashboard');
};

return (
<form onSubmit={handleSubmit}>
{/* form fields */}
</form>
);
};

Таблица методов маршрутизации

Вот удобная таблица, резюмирующая основные методы маршрутизации, которые мы обсуждали:

Метод	Цель	Пример
`<BrowserRouter>`	Оборачивает приложение для включения маршрутизации	`<BrowserRouter><App /></BrowserRouter>`
`<Route>`	Определяет маршрут	`<Route path="/about" component={About} />`
`<Switch>`	Обеспечивает отрисовку только одного маршрута	`<Switch><Route ... /><Route ... /></Switch>`
`<Link>`	Создает ссылку на маршрут	`<Link to="/about">About</Link>`
`useParams()`	Получает доступ к URL-параметрам	`let { id } = useParams();`
`useHistory()`	Программная навигация	`history.push('/dashboard');`

И вот оно,folks! Мы прошли через основы маршрутизации в React с использованием BrowserRouter. Помните, что практика делает perfect, так что не бойтесь экспериментировать с этими концепциями в своих проектах.

Счастливого кодирования, и пусть ваши маршруты всегда ведут вас к правильному компоненту!

Credits: Image by storyset