Хотя React Router в настоящее время является самым популярным решением маршрутизации для создания приложений с помощью React, некоторые люди считают, что в библиотеке слишком много функций, которые не используются для небольших приложений.
Например, библиотека React Router поддерживает маршрутизацию на основе хэшей и маршрутизации памяти, которая не будет использоваться, когда вашему приложению требуется только маршрутизация на основе браузера.
Wouter - это минималистичная библиотека маршрутизации, в которой реализованы только наиболее часто используемые функции React Router. Он также нацелен только на самую последнюю среду, которая является React v16.8.0 + и совместимыми с ES6 браузерами, чтобы еще больше уменьшить размер пакета.
По сравнению с React Router, Wouter имеет следующие преимущества:
- Крошечный и не имеет зависимостей. Только 1 КБ (1308 байт) в сжатом виде, в то время как React Router - 11 КБ.
- Нет обязательной оболочки верхнего уровня с
<Router/>компонентом - Имитирует передовой опыт React Router, поэтому он будет хорошо знаком пользователям React Router.
- Поддерживает библиотеки React и Preact
Но, конечно, у Wouter есть и недостатки по сравнению с React Router:
- Нет поддержки React Native
- Нет поддержки MemoryRouter и HashRouter
- Нет расширенных функций для поддержки маршрутизации, таких как
matchPath
Wouter предоставляет простой API, который ценят многие разработчики и авторы библиотек. Некоторые известные проекты, в которых используется Воутер, включают:
Совет: Совместное использование повторно используемых компонентов между проектами с помощью Bit (Github).
Bit упрощает совместное использование, документирование и организацию независимых компонентов любого проекта .
Используйте его для максимального повторного использования кода, совместной работы над независимыми компонентами и создания масштабируемых приложений.
Bit поддерживает Node, TypeScript, React, Vue, Angular и другие.
Начало работы с Воутером
Чтобы начать использовать Wouter, вам просто нужно установить пакет с помощью вашего любимого менеджера пакетов:
npm install wouter # or yarn add wouter
Тогда вы можете сразу приступить к реализации маршрутизатора. Импортируйте компоненты <Link> и <Route> из пакета wouter, затем создайте Link с href prop и компонент Route с совпадающим path:
import React from 'react';
import { Link, Route } from "wouter";
const App = () => (
<div>
<h1>Application</h1>
<Link href="/users/JohnDoe">
<a className="link">Profile</a>
</Link>
<Route path="/users/:username">
{(params) => <div>Hello, {params.username}!</div>}
</Route>
</div>
);
export default App;
Вы можете посмотреть рабочий пример здесь:
Дочерние элементы компонента Route будут отображаться, когда URL-адрес браузера совпадает с переданным ему параметром path.
Давайте посмотрим на полный список API Воутера.
API-интерфейс Wouter Hooks
У Wouter есть 3 простых в использовании крючка. Во-первых, ловушка useRoute используется, чтобы определить, соответствует ли текущий URL-адрес браузера указанному пути:
import { useRoute } from "wouter";
const UserRoute = () => {
// `match` is boolean
const [match, params] = useRoute("/users/:username");
if(match){
return <div>Hello, {params.username}!</div>
}
return null
};
Ловушку можно использовать для замены компонента theRoute. Вот пример useRoute в действии:
Далее, хук useLocation - это оболочка для собственного API истории браузера. Это позволяет вам управлять текущим местоположением браузера:
import { useLocation } from "wouter";
const CurrentLocation = () => {
const [location, setLocation] = useLocation();
return (
<div>
{`The current page is: ${location}`}
<a onClick={() => setLocation("/somewhere")}>Click to update</a>
</div>
);
};
Вот пример хука useLocation в действии:
Последний хук - это useRouter хук, который возвращает глобальный объект маршрутизатора. Этот перехватчик может понадобиться, когда вы используете компонент Router верхнего уровня (когда вам нужен настраиваемый базовый путь, настраиваемый сопоставитель или маршрутизация на основе хэша).
Вот пример вызова ловушки useRouter:
Давайте теперь посмотрим на API компонентов Воутера.
API компонентов Wouter
API-интерфейс Wouter на основе компонентов похож на API-интерфейс React Router, но намного проще. Компонент <Route> используется для условного рендеринга компонента, когда текущий маршрут соответствует его path шаблону, как вы видели ранее:
<Route path="/users/:username">
{(params) => <div>Hello, {params.username}!</div>}
</Route>
Компонент <Link> отображает элемент привязки <a>, который позволяет вам перейти к маршруту, указанному в его href опоре. Если вам нужно настроить стиль элемента привязки, вы можете добавить свой собственный элемент <a> в качестве его дочернего компонента:
<Link href="/foo">Hello!</Link>
Затем компонент <Switch> отобразит только первый соответствующий компонент Route и проигнорирует остальные. В приведенном ниже примере маршрут /orders/:status не будет отображаться при переходе к /orders/all:
import { Route, Switch } from "wouter";
<Switch>
<Route path="/orders/all" component={AllOrders} />
<Route path="/orders/:status" component={Orders} />
</Switch>;
Вот пример использования компонента <Switch>:
А еще есть компонент <Redirect>, который перенаправит ваших пользователей на путь, указанный в его опоре:
import { Redirect } from "wouter";
const User = ({ username }) => {
if (username !== 'John') return <Redirect to="/" />;
return <div> Current User is {userId} </div>;
};
Вот пример перенаправления в действии:
Наконец, Воутер также имеет компонент <Router>, который является необязательным компонентом верхнего уровня, который вы можете использовать для построения расширенной конфигурации маршрутизации.
В этот компонент можно передать настраиваемый базовый путь, настраиваемый сопоставитель или настраиваемый обработчик местоположения:
import { Router, Route, Link } from "wouter";
const App = () => (
<Router base="/app">
{/* the link's href attribute will be "/app/users" */}
<Link href="/users">Users</Link>
<Route path="/users">The current path is /app/users!</Route>
</Router>
);
Чтобы узнать больше о его использовании, ознакомьтесь с примером настройки привязки местоположения Воутера.
Заключение
Wouter - отличное крошечное решение для маршрутизации при создании приложений с помощью React. Создатель также рекомендует заглянуть в исходный код, чтобы узнать, как создать хорошую библиотеку с открытым исходным кодом, используя перехватчики React.
Но заменять им React Router не рекомендуется по нескольким причинам:
- Пути миграции с React Router на Wouter нет. Библиотека имитирует, но не полностью реализует API React Router.
- Wouter идеально подходит для домашних проектов, проектов хакатонов, небольших приложений с 10 маршрутами. Он не подходит для сложных приложений.
- На данный момент Wouter не имеет документации или поддержки сообщества. Вся информация по библиотеке находится на странице GitHub README.
Есть так много вещей, которые намеренно упустили Воутер на этапе проектирования: например, сложные сопоставления путей, перенаправления, переключатели, поддержка React Native и т. Д.
Короче говоря, если вам требуются только ссылки и маршруты, то Wouter станет отличным выбором для вашего проекта React. Но если вам нужна расширенная поддержка маршрутизации, лучше использовать React Router.
