ReactJS - Маршрутизация: Начальный гид по навигации в вашем приложении React

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

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

Прежде чем мы начнем, давайте представим, что вы строите дом. Каждая комната в вашем доме resembles different page в вашем веб-приложении. Теперь, не было бы замечательно, если бы вы могли перемещаться между этими комнатами, не rebuild-ing весь дом каждый раз? Именно это и делает маршрутизация в React!

Маршрутизация позволяет нам создавать одностраничное приложение с несколькими представлениями, давая пользователям возможность navigates между различными компонентами (или "страницами") без перезагрузки всего приложения. Это как داشение魔法льной двери, которая может привести вас в любую комнату в вашем доме мгновенно!

Установка React Router

Чтобы начать работу с маршрутизацией в React, мы должны установить популярную библиотеку под названием React Router. Не волнуйтесь; это так же просто, как pie!

Откройте ваш терминал, перейдите в директорию вашего проекта React и выполните следующую команду:

npm install react-router-dom

Эта команда instructs npm (Node Package Manager) установить пакет React Router для нас. Как только это будет сделано, мы будем готовы к маршрутизации!

React Router: Основы

Теперь, когда у нас установлен React Router, давайте узнаем, как его использовать. Мы начнем с простого примера и постепенно увеличим наш уровень знаний.

Шаг 1: Импортируйте необходимые компоненты

Сначала我们需要 import необходимые компоненты из React Router. Добавьте эти строки в верхнюю часть вашего главного файла App.js:

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

Шаг 2: Настройте маршрутизатор

Следующий, мы обернем все наше приложение с помощью компонента Router. Это tells React, что мы хотим enable маршрутизацию в нашем приложении:

function App() {
return (
<Router>
{/* Содержимое вашего приложения здесь */}
</Router>
);
}

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

Теперь давайте определим некоторые маршруты. Мы создадим три простых компонента: Home, About и Contact.

function Home() {
return <h2>Welcome to our Home page!</h2>;
}

function About() {
return <h2>Learn more about us on this About page.</h2>;
}

function Contact() {
return <h2>Get in touch with us via this Contact page.</h2>;
}

Чтобы настроить маршруты для этих компонентов, мы используем компонент Route:

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

Вот что происходит:

• Ключевое слово exact ensures, что компонент Home отображается только когда путь exactly "/".
• Каждый компонент Route принимает prop path (URL) и prop component (компонент для отрисовки на этом пути).

Шаг 4: Добавьте навигацию

Чтобы позволить пользователям navigates между этими маршрутами, мы используем компонент Link:

function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>

<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div>
</Router>
);
}

Компонент Link resembles super-powered <a> tag. Он позволяет navigates без полной перезагрузки страницы.

Вложенная маршрутизация

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

Вот как мы можем настроить вложенную маршрутизацию:

function Products() {
return (
<div>
<h2>Our Products</h2>
<ul>
<li>
<Link to="/products/electronics">Electronics</Link>
</li>
<li>
<Link to="/products/books">Books</Link>
</li>
</ul>

<Route path="/products/electronics" component={Electronics} />
<Route path="/products/books" component={Books} />
</div>
);
}

function Electronics() {
return <h3>Check out our latest gadgets!</h3>;
}

function Books() {
return <h3>Explore our extensive book collection!</h3>;
}

В этом примере компонент Products содержит свои собственные маршруты. Когда вы navigates к "/products/electronics", вы увидите как компонент Products, так и компонент Electronics.

Преимущества React Router

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

Преимущество	Описание
Динамическая маршрутизация	Маршруты определяются как часть композиции вашего приложения, а не в конфигурационном файле.
Вложенные маршруты	Легко создавать сложные интерфейсы с вложенными структурами маршрутизации.
Управление историей	Предоставляетfine-grained control над стэком истории браузера.
Разбиение кода	Позволяет легко разбиение кода, улучшая производительность приложения.
Декларативная маршрутизация	Определяйте свои маршруты как компоненты React, делая их более интуитивными и легкими для управления.

Заключение

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

Заканчивая, я вспоминаю студента, который однажды сказал мне: "React маршрутизация felt like trying to navigate a maze blindfolded." Но после некоторой практики тот же студент вернулся и сказал: "Now it's like I have a map and a flashlight!" Надеюсь, этот учебник gave вам карту и фонарик для вашего путешествия в мир React маршрутизации.

Продолжайте программировать, продолжайте учиться и, самое главное, получайте удовольствие от создания потрясающих приложений React!

Credits: Image by storyset