Использование с React Router
Итак, вы хотите использовать маршрутизацию с Вашим Redux-приложением. Для этого вы можете использовать React Router. Тогда Redux будет источником правдивых данных, а React Router — единственным источником URL. В большинстве случаев, правильно разделять эти понятия, но до тех пор, пока вам не понадобится путешествовать во времени (Time Travel) и перематывать экшены, которые изменяют URL.
Установка React Router DOM
react-router-dom доступно в npm . В этом руководстве преполагается использование версии react-router-dom@^4.1.1 .
npm install —save react-router-dom
Настройка запасного URL
Перед внедрением React Router нам требуется настроить наш сервер разработки. Конечно, наш сервер может не знать о роутах, заявленных в настройках React Router. Например, если вы переходите по ссылке /todos , то Ваш сервер должен возвращать index.html , так как это одностраничное приложение. Далее идут примеры настройки популярных серверов.
Важно при использовании Create React App
Если вы используете Create React App, то вам не требуется настраивать запасной URL. Это уже сделано автоматически.
Настройка Express
Если вы получаете index.html из Express:
app.get('/*', (req,res) => res.sendfile(path.join(__dirname, 'index.html')) >)
Настройка WebpackDevServer
Если вы получаете index.html из WebpackDevServer: Добавьте в webpack.config.dev.js:
devServer: historyApiFallback: true, >
Подключение React Router к Redux-приложению
В этой главе мы будем использовать наш пример Todos. Рекомендуем вам склонировать его для этой главы.
Во-первых, нам надо импортировать < Router />и < Route />из React Router. Вот как это делается:
import BrowserRouter as Router, Route > from 'react-router-dom' В React-приложении обычно < Route />оборачивается в < Router />, так что когда URL меняется, < Router />находит часть своих роутов и рендерит их сформированные компоненты. < Route />используется для декларативного сопоставления роутов иерархии компонентов вашего приложения. Вы можете объявить в path путь, используемый в URL, и в component — компонент, который должен быть сгенерирован при совпадении с этим URL.
const Root = () => ( Router> Route path="/" component=App> /> /Router> ) Однако, в нашем Redux-приложении нам все еще требуется < Provider />— компонент высшего порядка, поставляемый с React Redux, который позволяет привязать Redux к React (см. Использование с React).
Далее мы импортируем < Provider />из React Redux:
import Provider > from 'react-redux'; Обернем < Router />в < Provider />, таким образом обработчики маршрутизации смогут получить доступ к стору .
const Root = ( store >) => ( Provider store=store>> Router> Route path="/" component=App> /> /Router> /Provider> ) Теперь компонент < App />будет отрендерен, если URL содержит ‘/’. Кроме того, мы будем добавлять необязательный :filter? параметр к / . Нам это потребуется позже, когда мы будем читать параметр :filter из URL.
Route path="/:filter?" component=App> /> Полный код компонента
components/Root.js
import React from 'react' import PropTypes from 'prop-types' import Provider > from 'react-redux' import BrowserRouter as Router, Route > from 'react-router-dom' import App from './App' const Root = ( store >) => ( Provider store=store>> Router> Route path="/:filter?" component=App> /> /Router> /Provider> ) Root.propTypes = store: PropTypes.object.isRequired > export default Root Нам также надо отрефакторить index.js , для того, чтобы рендерить < Root />компонент в DOM.
index.js
import React from 'react' import render > from 'react-dom' import createStore > from 'redux' import todoApp from './reducers' import Root from './components/Root' const store = createStore(todoApp) render(Root store=store> />, document.getElementById('root')) Навигация при помощи React Router
React Router поставляется с компонентом < Link /> который позволяет перемещаться по приложению. Если вы захотите добавить некоторые стили, react-router-dom предоставляет специальный < Link />называемый < NavLink />, который принимает параметры стилизации. Параметр activeStyle позволяет применить стиль активного состояния.
containers/FilterLink.js
import React from 'react' import NavLink > from 'react-router-dom' const FilterLink = ( filter, children >) => ( NavLink exact to=filter === 'SHOW_ALL' ? '/' : `/$filter>`> activeStyle= textDecoration: 'none', color: 'black' >> > children> /NavLink> ) export default FilterLink components/Footer.js
import React from 'react' import FilterLink from '../containers/FilterLink' import VisibilityFilters > from '../actions' const Footer = () => ( p> Show: FilterLink filter=VisibilityFilters.SHOW_ALL>>All/FilterLink> ', '> FilterLink filter=VisibilityFilters.SHOW_ACTIVE>>Active/FilterLink> ', '> FilterLink filter=VisibilityFilters.SHOW_COMPLETED>>Completed/FilterLink> /p> ) export default Footer Теперь, если вы кликнете на < FilterLink />, вы увидите, что URL изменится с ‘/SHOW_COMPLETED’ , ‘/SHOW_ACTIVE’ и ‘/’ . Даже если вы захотите перейти назад, используя соответствующую кнопку браузера, приложение будет использовать для этого историю Вашего браузера и успешно перейдет к предыдущему URL.
Чтение из URL
Сейчас todo list не фильтруется после изменения URL. Это происходит потому, что фильтрация описана в функции mapStateToProps() компонента < VisibleTodoList />, которая в свою очередь связана с состоянием , а не с URL. mapStateToProps имеет второй необязательный аргумент ownProps — объект, содержащий все параметры, переданные в < VisibleTodoList />.
containers/VisibleTodoList.js
const mapStateToProps = (state, ownProps) => return todos: getVisibleTodos(state.todos, ownProps.filter) // ранее было getVisibleTodos(state.todos, state.visibilityFilter) >; >; В данный момент мы ничего не передаем в < App />, поэтому ownProps является пустым объектом. Чтобы отфильтровать наши todos в соответствии с URL, нам надо передать параметры URL в < VisibleTodoList />.
Когда мы написали: < Route path = " /:filter? " component = /> , это позволило в компоненте App получить доступ к параметру params .
Параметр params — это объект со всеми параметрами из URL, доступный в объекте match . Например, match.params эквивалетно < filter: SHOW_COMPLETED' >, если URL localhost:3000/SHOW_COMPLETED . Теперь мы можем считывать URL из компонента < App />.*
Важно помнить, что мы используем ES6-деструкцию на параметрах, чтобы передать их в params в < VisibleTodoList />.
components/App.js
const App = ( match: params > >) => return ( div> AddTodo /> VisibleTodoList filter=params.filter || 'SHOW_ALL'> /> Footer /> /div> ) > Следующие шаги
Теперь, когда мы знаем основы создания простой навигации, мы можем перейти к изучению React Router API.
Помните, что существуют и другие библиотеки для навигации по приложению
Redux Router — экспериментальная библиотека, она позволяет Вам хранить все состояние Вашего URL в redux сторе. У нее то же самое API, что и у React Router, но сообщество и поддержка меньше, чем у React Router.
React Router Redux создает связь между Вашим Redux-приложением и React Router и позволяет их синхронизировать. Без этой связи у Вас не будет возможности перемещаться по экшенам при помощи Time Travel. Пока Вам это не требуется, React-router и Redux могут работать совершенно независимо.
results matching » «
No results matching » «
How to downgrade react-router-dom version to v5.2.0
There are a documentation provided by react-router to upgrade or downgrade the react-router version : https://github.com/remix-run/react-router/blob/main/docs/upgrading/v5.md or use this npm command:
Package version 5.2.3 doesn’t exist.
I hope that can help you to resolve your issue.
31 10 10 bronze badges
answered Nov 6, 2021 at 6:58
1,080 5 5 silver badges 9 9 bronze badges
I had the same issue, version 5.2.3 don’t work with me so I tried 5.2.0 and it working, thanks.
Jul 7, 2022 at 13:20
- reactjs
- react-router-dom
-
The Overflow Blog
Related
Hot Network Questions
Subscribe to RSS
Question feed
To subscribe to this RSS feed, copy and paste this URL into your RSS reader.
Site design / logo © 2024 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2024.1.3.2953
By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.
Маршрутизация в React Router: как она работает и почему ее выбирают разработчики
React Router — решение для переключения и маршрутизации страниц React. Библиотека появилась еще в 2014 году и стала одним из первых популярных проектов с открытым исходным кодом на основе React. Рассказываем про ключевую концепцию библиотеки и разбираем, почему разработчики выбирают именно ее для организации маршрутизации. Бонусом — напишем небольшое приложение c использованием хуков useLocation и useNavigate , и увидим, как на практике работает маршрутизация через React Router.
- Декларативная маршрутизация
- Подготовка окружения
- Настройка маршрутов
- Настройка вложенных маршрутов в React Router v6
- Хук useLocation
- Хук useNavigate
- Другие хуки
Этот подробный гайд больше подходит для тех, кто уже немного знает основы React. Если вы еще не разобрались с ним, советуем перед прочтением статьи пройти большой курс по React на Хекслете.
Фронтенд-разработчик — с нуля до трудоустройства за 10 месяцев
- Постоянная поддержка от наставника и учебного центра
- Помощь с трудоустройством
- Готовое портфолио к концу обучения
- Практика с первого урока
Вы получите именно те инструменты и навыки, которые позволят вам найти работу
Декларативная маршрутизация
Декларативная маршрутизация — это стиль кодирования, используемый в React и React Router. Декларативные маршруты React являются компонентами и используют ту же инфраструктуру, что и любое приложение React. Эти маршруты связывают веб-адреса с определенными страницами и другими компонентами, используя мощный механизм рендеринга React и условную логику для программного включения и выключения маршрутов.
Конечно, любой маршрутизатор хорош настолько, насколько хороша его библиотека. React Router в шестой версии предоставляет множество мощных функций для упрощения задач маршрутизации и является предпочтительным решением для маршрутизации React.
Что делает React Router лучшим по сравнению с другими библиотеками маршрутизации:
- Декларативное определение маршрута (с использованием JSX внутри компонентов React)
- Отраслевой стандарт
- Библиотека предлагает множество примеров кода и обширное онлайн-руководство
- React Router предоставляет возможность использования хуков и функциональных компонентов.
Текущая версия React Router v6 внесла ряд ключевых изменений по сравнению с предыдущей версией v5:
- Компонент был переименован в
- Хук useRoutes() заменяет react-router-config для определения маршрутов как простых объектов
- Каждый дочерний компонент должен быть , что может нарушить некоторые предыдущие методы организации и составления маршрутов.
В нашей статье все примеры будут построены c использованием React Router именно шестой версии.
Подготовка окружения
Прежде чем мы приступим к практике, необходимо подготовить рабочее окружение.
Для создания веб-приложений нам нужен react-router-dom , который включает в себя все, что есть в react-router , и добавляет несколько специфичных для DOM API компонентов, включая и .
Создадим проект с помощью Create React App и установим react-router-dom :
npx create-react-app my-app cd my-app npm i react-router-dom Кроме того, установим lorem-ipsum для генерации текста-заполнителя lorem ipsum для страниц.
npm i lorem-ipsum
Теперь пакеты react-router-dom и lorem-ipsum можно увидеть в package.json в качестве зависимостей.
Настройка маршрутов
Router — это компонент верхнего уровня с отслеживанием состояния, который заставляет работать все остальные компоненты навигации и хуки. В React Router есть BrowserRouter , HashRouter , StaticRouter , NativeRouter и MemoryRouter . Для веб-приложений обычно используется BrowserRouter . Приложение должно иметь один , который обертывает один или несколько .
проверяет все свои дочерние элементы , чтобы найти наилучшее соответствие, и отображает эту часть пользовательского интерфейса.
можно определить либо как объект, либо элемент Route. Если это объект, он имеет форму < path, element >. Если это элемент Route, компонент имеет вид . Когда указанный путь path соответствует текущему URL-адресу, то отображается компонент, указанный в качестве элемента element . В нашем приложении мы будем использовать именно element .
Подготовим несколько страниц, для которых будем настраивать маршрутизацию:
// src/Components/Pages.jsx import loremIpsum > from 'lorem-ipsum'; const BuildPage = (index) => ( <> h3>Page index>h3> div> Page index> content: loremIpsum( count: 5 >)> div> ); export const PageOne = () => BuildPage(1); export const PageTwo = () => BuildPage(2); В src/App.js создадим два маршрута:
// App.jsx import BrowserRouter, Routes, Route > from 'react-router-dom'; import PageOne, PageTwo > from './Components/Pages'; function App() return ( BrowserRouter> Routes> Route path="one" element=PageOne />> /> Route path="two" element=PageTwo />> /> Routes> BrowserRouter> ); > export default App; В этом коде и используются для определения маршрутизатора.
В приложении есть два . Когда URL-адрес соответствует пути one , приложение показывает компонент PageOne . Когда URL-адрес соответствует пути two , приложение показывает компонент PageTwo .
Запустим приложение, выполнив команду npm start .
http://localhost:3000/one показывает PageOne
http://localhost:3000/two показывает PageTwo
Приложение работает для путей one и two . Однако http://localhost:3000 ничего не показывает, как и любые недействительные URL-адреса, такие как http://localhost:3000/anything .
Эту проблему можно решить с помощью подстановочного пути:
// App.jsx import BrowserRouter, Routes, Route > from 'react-router-dom'; import PageOne, PageTwo > from './Components/Pages'; function App() return ( BrowserRouter> Routes> /* подстановочный путь */> Route path="*" element=PageOne />> /> Route path="two" element=PageTwo />> /> Routes> BrowserRouter> ); > export default App; Теперь http://localhost:3000/two показывает PageTwo . Во всех остальных случаях будет отображаться PageOne . Порядок указания маршрутов не имеет значения, так как React Router 6 выбирает в первую очередь наиболее точное совпадение.
Настройка вложенных маршрутов в React Router v6
Два маршрута в приведенном выше примере работают, как мы и ожидали. Однако вводить URL-адрес в адресной строке браузера неудобно. Мы хотели бы иметь возможность навигации по ссылке, которая называется .
Создадим главную страницу, которая будет содержать ссылки на соответствующие страницы src/MainPage.js .
// src/MainPage.js import Link > from 'react-router-dom'; export const MainPage = () => ( nav> ul> li> Link to="/one">Page OneLink> li> li> Link to="/two">Page TwoLink> li> ul> nav> ); Добавим главную страницу в наше приложение и отметим эту страницу как индексный маршрут, который является дочерним маршрутом без пути.
import BrowserRouter, Routes, Route, > from 'react-router-dom'; import PageOne, PageTwo > from './Components/Pages'; import MainPage from './Components/MainPage'; const App = () => return ( BrowserRouter> Routes> Route path="/" element=MainPage/> > /> Route path="one" element=PageOne />> /> Route path="two" element=PageTwo />> /> Routes> BrowserRouter> ); > export default App; Теперь, когда URL-адрес соответствует «/» , приложение будет показывать MainPage: MainPage .
Нажав на ссылку Page One , мы перейдем на PageOne . Нажав на ссылку Page Two , мы перейдем на PageTwo .
Однако внутри PageOne или PageTwo мы не можем использовать ссылки для навигации. Чтобы решить эту проблему, создадим компонент в MainPage . Он позволяет отображать вложенный пользовательский интерфейс при отображении дочерних маршрутов. Таким образом, при клике на ‘one’ будет отображаться компонент PageOne , а при клике на ‘two’ — PageTwo .
Это src/MainPage.js с Outlet :
import React from 'react'; import Link, Outlet > from 'react-router-dom'; const MainPage = () => return ( <> nav> ul> li> Link to='/one'>Page OneLink> li> li> Link to='/two'>Page TwoLink> li> ul> nav> hr /> Outlet /> ) >; вызывает вложенные маршруты, где у каждого могут быть свои дочерние маршруты, занимающие часть URL-адреса. Вложенные маршруты обычно описывают через относительные ссылки.
Вот модифицированный src/App.jsx :
import BrowserRouter, Routes, Route > from 'react-router-dom'; import PageOne, PageTwo > from './Components/Pages'; import MainPage from './Components/MainPage'; const App = () => return ( BrowserRouter> Routes> Route path="/" element=MainPage />> > Route index element=div>No page is selected.div> > /> Route path="one" element=PageOne />> /> Route path="two" element=PageTwo />> /> Route> Routes> BrowserRouter> ); > http://localhost:3000/ теперь выглядит так:
А так http://localhost:3000/one :
Хук useLocation
Местоположение — это объект, который представляет местоположение URL. Он основан на объекте браузера window.location .
Хук useLocation возвращает объект текущего местоположения.
import React, useEffect > from 'react'; import Link, Outlet, useLocation > from 'react-router-dom'; const MainPage = () => const location = useLocation(); useEffect(() => console.log('Current location is ', location); >, [location]); return ( <> nav> ul> li> Link to="/one">Page OneLink> li> li> Link to="/two">Page TwoLink> li> ul> nav> hr /> Outlet /> ); >; В переменную location мы сохраняем местоположение, которое генерируется хуком useLocation . Внутри хука useEffect мы будем выводить текущее местоположение при каждом изменении параметра location .
Если URL-адрес http://localhost:3000/ , то консоль регистрирует:
Если URL-адрес http://localhost:3000/one , то консоль регистрирует:
Когда URL-адрес http://localhost:3000/anything , то тут консоль регистрирует:
Хук useNavigate
Хук useNavigate возвращает функцию, которую можно использовать для программной навигации. Заменим все в нашем приложении на в src/MainPage.js :
import React, useEffect > from 'react'; import Outlet, useLocation, useNavigate > from 'react-router-dom'; const MainPage = () => const location = useLocation(); const navigate = useNavigate(); useEffect(() => console.log('Current location is ', location); >, [location]); return ( <> nav> ul> li> button onClick=() => navigate('one', replace: false >)>> Page One button> li> li> button onClick=() => navigate('two', replace: false >)>> Page Two button> li> ul> nav> hr /> Outlet /> ) >; Теперь запустим наше приложение и убедимся, что кнопки работают аналогично ссылкам.
Хук useNavigate может принимать:
- Либо значение To с необязательным вторым аргументом < replace, state >, как это работает и в
- Либо дельта-число, чтобы войти в стек истории. Например, навигация (-1) по своей сути аналогична нажатию кнопки «Назад».
Другие хуки
Мы показали, как использовать useLocation и useNavigate . При этом в библиотеке есть и другие хуки — например, useParams или useRoutes . С ними можно ознакомиться в официальной документации React Router.
Статья является адаптированным переводом команды Хекслета материалов из следующих источников: 1 и 2.
Профессия «Фронтенд-разработчик»
- Изучите востребованные JavaScript и TypeScript
- Научитесь создавать пользовательские интерфейсы сайтов и приложений
- Освойте самый популярный фреймворк JavaScript — React
- Познакомьтесь с языками веб-разработки HTML и CSS
Решено: как установить React Router dom версии 5
Основная проблема, связанная с установкой React Router DOM версии 5, заключается в том, что она не имеет обратной совместимости с более ранними версиями React Router. Это означает, что если у вас есть существующее приложение, построенное на более ранней версии React Router, вам нужно будет переписать свой код, чтобы использовать новую версию. Кроме того, некоторые функции и API, доступные в более ранних версиях, могут быть недоступны в последней версии, поэтому вам может потребоваться внести соответствующие изменения в код.
To install React Router DOM version 5, you can use either npm or yarn. Using npm: 1. Run the command `npm install react-router-dom@5` in your terminal. 2. Once the installation is complete, import the components you need into your React application. Using yarn: 1. Run the command `yarn add react-router-dom@5` in your terminal. 2. Once the installation is complete, import the components you need into your React application.
Что такое дом версии 5
DOM версии 5 — это функция React Router, которая позволяет разработчикам использовать API истории HTML5 для управления URL-адресом своего приложения. Это позволяет разработчикам создавать динамические одностраничные приложения, по которым можно перемещаться без обновления страницы. Он также обеспечивает поддержку истории браузера и глубоких ссылок, что упрощает пользователям обмен ссылками с другими. Кроме того, DOM версии 5 позволяет разработчикам использовать такие мощные функции, как предварительная загрузка маршрута и отложенная загрузка.
Главная » JavaScript » Реактивный маршрутизатор » Решено: как установить React Router dom версии 5
- Решено: маршрутизатор ActiveClassName реагирует
- Решено: добавление параметров в URL-адрес реакции маршрутизатора
- Решено: маршрутизатор jsreact с алфавитным массивом
- Решено: скачать React Router dom
- Решено: получить запрос от URL-адреса, реагирующего на маршрутизатор dom v6.
- Решено: как установить реагирующий маршрутизатор с помощью npm
- Решено: как insatll react-router-dom
- Решено: как перенаправить в React Router v6
- Решено: установить React Router dom и сохранить
- Решено: npm реагировать на маршрутизатор dom% 405
- Решено: передать данные, перейти к реагирующему маршрутизатору dom.
- Решено: передача данных в историю реагирования маршрутизатора% 2Cpush
- Решено: реагировать на перенаправление маршрутизатора 404
- Решено: реагировать на маршрутизатор 6 навигации
- Решено: реагирующий маршрутизатор добавляет запасной вариант, чтобы поймать все
- Решено: реагировать на маршрутизатор dom IndexRedirect
- Решено: реагировать на маршрутизатор dom npm
- Решено: реагировать на внешнюю ссылку маршрутизатора
- Решено: реагировать на ленивую загрузку маршрутизатора
- Решено: ссылка на реагирующий маршрутизатор работает
- Решено: реагировать на маршрутизатор на следующей странице вверху
- Решено: страница перезагрузки маршрутизатора не найдена
- Решено: реагировать на параметры URL-адреса маршрутизатора
- Решено: реагировать на маршрутизатор, используя статические стили.
- Решено: реагировать на маршрутизатор, используя стили из общей папки.
- Решено: реагировать на ленивую приостановку маршрутизатора v6
- Решено: реагировать на пряжу маршрутизатора
- Решено: перенаправить с помощью реактивного маршрутизатора v6
- Решено: используйте приложение History React Router v6.
Любители JavaScript. Мы несем это в нашей крови, в наших сердцах и в наших венах. Один из самых важных языков программирования на сегодняшний день. Мы помогаем с JavaScript и всеми его фреймворками