Библиотека React Router
В данной статье мы рассмотрим с Вами как можно добавить переходы по ссылкам на сайте без перезагрузки страницы. Это особенно актуально для одно страничных приложений, которые, в частности, пишутся на React.
В качестве примера мы будем использовать библиотеку react-router-dom. По своей сути, то, что делает React Router, - это условный рендеринг определенных компонентов для отображения в зависимости от маршрута, используемого в URL-адресе (/ - для домашней страницы, /about - для страницы "О нас" и т. д.).
Итак, для начала поставим необходимые библиотеки, для этого в консоли выполним:
// команда будет выполняться некоторое время
$ npx create-react-app
// затем ставим саму библиотеку маршрутизации
npm install react-router-dom
Теперь непосредственно код компонентов:
В примере я связываю главную страницу с двумя другими "страницами" (которые на самом деле являются просто компонентами) под названием Contacts и About.
Для этого нужно настроить приложение для работы с React Router. Все, что будет визуализировано, должно будет войти в элемент <BrowserRouter>, поэтому сначала оберните свое приложение в данный компонент. Это базовый компонент, который выполняет всю логику отображения различных компонентов, которые вы ему предоставляете.
index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
// импортируем пакеты роутинга
import { BrowserRouter, Route, Switch } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
)
Затем в компоненте App добавьте элемент Switch. Он гарантируют, что одновременно будет отображаться только один компонент. Если мы не используем его, мы можем по умолчанию использовать компонент Error (страница не найдена), который напишем далее.
App.js
import React, { Component } from 'react';
import { Route, Switch } from 'react-router-dom';
function App() {
return (
<main>
<Switch>
</Switch>
</main>
)
}
Теперь пришло время добавить теги <Route>. Это ссылки между компонентами, которые должны быть помещены внутри тегов <Switch>.
Чтобы указать тегам <Route>, какой компонент следует загрузить, просто добавьте атрибут path и имя компонента, который вы хотите загрузить с помощью атрибута component.
<Route path='/' component={Home} />
На любом сайте есть множестов адресов, начинающихся с "/". Наш роутер в этом случае возьмет любой адрес начинающийся с данного символа, чтобы этого не произошло надо добавить аттрибут exact к тегу Route. После этого мы получим корректное совпадение маршрутов.
import Home from './components/Home';
import About from './components/About';
import Contacts from './components/Contacts';
import Error from './components/Error';
function App() {
return (
<main>
<Switch>
<Route path="/" component={Home} exact />
<Route path="/about" component={Contacts} />
<Route path="/shop" component={About} />
<Route component={Error} /> // вызывается, если нет совпадения по маршрутам
</Switch>
</main>
)
}
Теперь, там где нам нужны ссылки (например, в навигации) мы можем добавить следующий компонент:
function Navbar() {
return (
<div>
<Link to="/">Главная</Link>
<Link to="/about">О Нас</Link>
<Link to="/contacts">Контакты/Link>
</div>
);
};
Таким образом, в браузере будут меняться URL и содержимое страницы, но при этом перезагрузки происходить не будут.
-
Создано 27.10.2020 13:59:04
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.