В этой статье мы разберём основы работы JavaScript библиотеки для React.js, которая называется React router, думаю многим будет интересно и полезно посмотреть на неё.
Также посмотрите статью «Первый блог на React.js», тоже очень интересная статья, для новичков в React.js, им обязательно к прочтению.
Для чего нужен React router:
Как понятно из названия, это библиотека нужна для работы с маршрутами, или с URL, благородя ей вы сможете настроить свои URL маршруты для определённых React компонентов, которые вы хотите выводить как отдельные страницы.
Ещё это хорошо помогает SEO, поэтому если трафик вашего сайта будет зависеть от этого, то тоже обязательно нужно использовать эту библиотеку.
Установка React router:
Установить её очень легко, для этого вам нужно использовать NPM или YARN, тут всё зависит от того, что вы используете, ну ещё нужен сам React, ну это думаю понятно, вот команды:
NPM:
1 | npm install react-router-dom |
Или YARN:
1 | yarn add react-router-dom |
После этого можете работать с этой библиотекой.
Основы работы с React router:
Здесь я вам покажу два примера, которые отражаю по сути два принципа работы с этой библиотекой, оба очень важны.
Начнём с основного, такой принцип в основном используют новички, или в не очень больших приложениях, вот он:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | import React from "react"; import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"; export default function BasicExample() { return ( <Router> <div> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link> </li> <li> <Link to="/dashboard">Dashboard</Link> </li> </ul> <hr /> <Switch> <Route exact path="/"> <Home /> </Route> <Route path="/about"> <About /> </Route> <Route path="/dashboard"> <Dashboard /> </Route> </Switch> </div> </Router> ); } |
В начале тут мы подключаем React, после этого подключаем нужные компоненты из React router, о них мы и поговорим, но на примере то чего мы возвращаем, и как видите всё что мы возвращаем в вставляем внутрь компонента <Router> или BrowserRouter, мы просто для удобство у нас название его немного поменяли.
Сразу же делаем меню, которое будет нас перемешать на разные URL, ссылки же мы делаем из компонента <Link/>, ссылку указываем в атрибуте to, этого компонента, он у нас относительный, и домен будет подставляться автоматически.
Чуть ниже объявляем компонент <Switch/>, как раз он и будет отвечать за переключение страниц или компонентов, внутри него объявляем три компонента <Route/>, в качестве атрибута которые принимают path, то есть путь URL при котором будет отображаться компонент который нам нужен, сам компонент, который мы хотим отобразить, вставляем внутрь <Route/>, думаю вы это и так заметили.
Второй способ будет поинтереснее, суть в том что сейчас мы создадим переменную конфигурации, и функцию, которая будет зависимо от этой переменной создавать страницы.
Вот как он будет выглядеть:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | import React from "react"; import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"; const routes = [ { path: "/sandwiches", component: Sandwiches }, { path: "/tacos", component: Tacos, routes: [ { path: "/tacos/bus", component: Bus }, { path: "/tacos/cart", component: Cart } ] } ]; export default function RouteConfigExample() { return ( <Router> <div> <ul> <li> <Link to="/tacos">Tacos</Link> </li> <li> <Link to="/sandwiches">Sandwiches</Link> </li> </ul> <Switch> {routes.map((route, i) => ( <RouteWithSubRoutes key={i} {...route} /> ))} </Switch> </div> </Router> ); } function RouteWithSubRoutes(route) { return ( <Route path={route.path} render={props => ( <route.component {...props} routes={route.routes} /> )} /> ); } |
В начале мы всё так же подключаем все компоненты, потом создаём массив с объектами, это и будет конфигурация конфигурация компонентов, каждый объект, это подключение компонента, как видите объект имеет свойство path, для хранена относительного пути и component, который хранит ссылку на компонент, также один компонент у на имеет ещё одну свойство routes, это массив объектов компонентов, вот и всё.
Дальше делаем рендер, в начале создаём меню, его кстати тоже можно автоматизировать, ещё чуть ниже объявляем компонент <Switch/>, и внутри него проходимся по нашему массиву с конфигурациями и для объявления компонентов используем компонент RouteWithSubRoutes, который создадим чуть ниже.
Когда создаём компонент RouteWithSubRoutes, в него передаём наш объект с данными ко роутинг, и он возвращает нам компонент Route, с path и атрибутом render, в него мы передаём ссылку на компонент.
Теперь можете запустить и убедиться что всё работает.
В целом это наверное самое основное что стоит знать, конечно это ещё не всё, что можно делать с использованием этой библиотеки.
Вывод:
В этой статье мы рассмотрели библиотеку для React.js, которая называется React router, нужна он для управлениями URL путям в этом фреймворке, думаю вам было интересно, но если хотите узнать о ней больше, то перейдите по ссылке.
Подписываетесь на соц-сети:
Оценка:
Загрузка...