, чтобы приложение не упало. Создайте новую папку layouts, а в ней — файл layouts/main.js: в данном файле будем хранить базовый макет приложения.","type":"unstyled","key":"3iem2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"mkdir layouts\ntouch layouts/main.js","type":"unstyled","key":"prac"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":171,"style":"ITALIC"}],"text":"Для начала, мы создадим в файле main.js навигационную панель; она будет выглядеть недостаточно хорошо с точки зрения дизайна, но ведь вы читаете руководство ради изучения React Router, а не ради готовой CSS-вёрстки. Навигация содержит ссылки на страницу с информацией о сайте и страницу с контактами.","type":"unstyled","key":"djruv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":244,"style":"ITALIC"}],"text":"Сразу под навигацией создадим блок

с контентом для отображения расширенной информации при пользовательском нажатии на выбранную ссылку; такие контент-блоки — это крайне распространенная настройка для одностраничного приложения на React: создаётся статичный макет сайта с навигацией и карточка, динамически меняющая свое содержимое. Рассмотрите следующий пример повнимательнее:","type":"unstyled","key":"dksnm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import Navbar from '../components/navbar/navbar'\nfunction Main() {\n return (\n

\n \n

\n )\n}\n\nexport default Main;","type":"unstyled","key":"aogvt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Main.js — это макет приложения по умолчанию","type":"unstyled","key":"936u9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":223,"style":"ITALIC"}],"text":"Теперь давайте расширим ссылками элемент навигационной панели, а затем посетим только что созданную страницу: создайте в существующей директории src новую директорию с названием components, в ней мы сохраним все компоненты React-приложения; затем создайте файл components/navbar/navbar.js.","type":"unstyled","key":"f0gn9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"mkdir -p components/navbar/\ntouch components/navbar/navbar.js","type":"unstyled","key":"1k46m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"h","type":"unstyled","key":"1oac5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function Navbar() {\n return (\n

Navbar

Home
about
Contact

\n )\n}\n\nexport default Navbar;","type":"unstyled","key":"as5l9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Navbar.js — простой список ссылок для навигации","type":"unstyled","key":"8s9fk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":67,"style":"ITALIC"}],"text":"Наконец, откройте файл src/index.css и вставьте следующий фрагмент CSS, ведь он поможет красиво отобразить навигационную панель в виде горизонтального списка:","type":"unstyled","key":"fcbuf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".navbar ul {\n list-style-type: none;\n margin: 0;\n padding: 0;\n overflow: hidden;\n}\n\n.navbar li {\n float: left;\n}\n\n.navbar li a {\n display: block;\n padding: 8px;\n background-color: #dddddd;\n}","type":"unstyled","key":"46p66"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"index.css — добавление горизонтальной навигационной панели","type":"unstyled","key":"avij"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":115,"style":"ITALIC"}],"text":"Запустите приложение и откройте в браузере ссылку localhost:3000, чтобы полюбоваться на свои труды — ваше первое React single page application:","type":"unstyled","key":"e3t9r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"npm start","type":"unstyled","key":"9pcn4"},{"data":{"image":{"id":"61a3f3c6ce0d12740b5b0db1"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ваша первая, пока что еще не до конца рабочая панель навигации должна выглядеть как на скриншоте","type":"atomic:image","key":"3kjc0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":35,"style":"ITALIC"}],"text":"Прежде чем приступить к реализации React Router, нам нужно создать три очень простых компонента: они будут только лишь выводить на экран свое название.","type":"unstyled","key":"4vuur"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"mkdir components/about\nmkdir components/contact\nmkdir components/home","type":"unstyled","key":"2p6li"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":28,"offset":0}],"inlineStyleRanges":[],"text":"https://nuancesprog.ru/media","type":"unstyled","key":"a6207"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function About() {\n return (\n

About

\n )\n}\n\nexport default About;","type":"unstyled","key":"cdi4a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":229,"style":"ITALIC"}],"text":"Скопируйте и вставьте приведенный выше код в три созданных ранее файла компонентов, лишь измените в каждом из них название на соответствующее конкретной странице сайта. Таким образом, у вас должны получиться следующие компоненты React-приложения: components/about/About.js, components/contact/Contact.js и components/home/Home.js, причём код во всех этих файлах должен быть одинаково похож на пример выше, лишь с измененными названиями внутри тегов

\n \n \n

\n \n \n \n \n \n \n

\n \n

\n )\n}\n\nexport default Main;","type":"unstyled","key":"u60v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Main.js — полный пример программы с перенаправлением на нужный компонент в зависимости от URL-адреса","type":"unstyled","key":"a6moc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Далее необходимо изменить Navbar.js так, чтобы он содержал специальные компоненты NavLink вместо тегов , ведь маршрутизатор будет работать только с компонентами Link.","type":"unstyled","key":"ej2ns"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"ITALIC"}],"text":"Вы заметили, что путь / содержит ключевое слово? Оно необходимо из-за того, что такой путь по умолчанию соответствует ВСЕМ ВОЗМОЖНЫМ путям, ведь все они содержат данный символ. Помните, какую ссылку выберет переключатель Switch? Именно первое совпадение, поэтому необходимо явно указать, что выбирать путь / нужно только в случае полного, абсолютного совпадения. Пример программы:","type":"unstyled","key":"1kcd4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { NavLink } from \"react-router-dom\";\n\nfunction Navbar() {\n return (\n

Navbar

Home
Contact
About

\n )\n}\n\nexport default Navbar;","type":"unstyled","key":"84do9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Navbar.js — полный код навигационной панели с NavLinks вместо тегов ","type":"unstyled","key":"16uuh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"По желанию измените свойство CSS .active в файле index.css, визуально выделив активную навигационную ссылку.","type":"unstyled","key":"ksfv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".active {\n color: #ffffff;\n}","type":"unstyled","key":"6km3e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"index.css — визуальное выделение активной навигационной ссылки","type":"unstyled","key":"4ln7o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Откройте страницу по адресу localhost:3000, чтобы оценить результат и протестировать навигацию по сайту. Если все этапы разработки выполнены правильно, то вы должны увидеть одну особенность поведения веб-страницы: содержимое переключается, в то время как верхняя панель навигации остается неизменной.","type":"unstyled","key":"5q2tk"},{"data":{"image":{"id":"61a3f3c6c5af6f62af6192fc"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"http://localhost:3000/#/ — обратите внимание на символ решетки, используемый в URL-адресе хэш-роутером","type":"atomic:image","key":"7kd8e"},{"data":{"image":{"id":"61a3f3c6c5af6f62af6192fd"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"http://localhost:3000/#/about — URL и контент изменяются при выборе другой навигационной ссылки","type":"atomic:image","key":"22jt5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"UseParams","type":"header-three","key":"3mtc6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":0,"style":"ITALIC"}],"text":"Передача данных в ссылку","type":"unstyled","key":"6p9ci"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Одна из ключевых особенностей ссылок заключается в возможности передачи разных данных в компоненты, что довольно важно, например, при настройке профиля пользователя.","type":"unstyled","key":"3jp8a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рассмотрим два способа передачи данных в маршрутизаторе.","type":"unstyled","key":"ed7nt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Первый способ — это хук useParams из react-router, позволяющий передавать пары ключ-значение в URL.","type":"unstyled","key":"eks3i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь напишем профиль пользователя и выведем его имя на витрину.","type":"unstyled","key":"55ebi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сначала создайте новую папку user, далее — добавьте в неё файл components/user/profile.js.","type":"unstyled","key":"c7oaa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"mkdir components/user\ntouch components/user/profile.js","type":"unstyled","key":"49h61"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В файле profile.js импортируем useParams, затем присваиваем значение имени пользователя с помощью данного хука. Вот код:","type":"unstyled","key":"b7f80"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { useParams } from \"react-router\";\n\nfunction Profile() {\n // Для получения имени пользователя из URL примените хук useParams. \n // Имя пользователя должно указывается в качестве именованного параметра маршрута. \n const { username } = useParams();\n\n return (\n

{username} Profile

\n )\n}\n\nexport default Profile;","type":"unstyled","key":"7lo9n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"profile.js — useParams позволяет извлечь имя пользователя из URL-адреса","type":"unstyled","key":"f9g00"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как useParams узнаёт, какое именно значение извлекать? При помощи именованных параметров из объявления маршрута, конечно же; параметры именуются путем добавления :parameter к Route. Поэтому теперь измените маршрут в main.js, добавив к нему параметр :username следующим образом:","type":"unstyled","key":"6ec3t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { useParams } from \"react-router\";\n\nfunction Profile() {\n // Для получения имени пользователя из URL примените хук useParams. \n // Имя пользователя должно указывается в качестве именованного параметра маршрута. \n const { username } = useParams();\n\n return (\n

{username} Profile

\n )\n}\n\nexport default Profile;","type":"unstyled","key":"608dn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"main.js — добавление маршрута профиля с параметром :username","type":"unstyled","key":"1s3qo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Последнее, что нужно изменить — навигационная панель должна показывать страницу профиля и вставлять значение имени пользователя в ссылку. Для примера всё жестко закодировано, но в реальном сценарии ваша панель навигации почти всегда получает имя пользователя откуда-то ещё.","type":"unstyled","key":"2q6io"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { NavLink } from \"react-router-dom\";\n\nfunction Navbar() {\n return (\n

Navbar

Home
Contact
About
Profile

\n )\n}\n\nexport default Navbar;","type":"unstyled","key":"7knqe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Navbar.js — добавление ссылки на profile/percybolmer, где percybolmer — значение имени пользователя, жестко закодированное для примера","type":"unstyled","key":"9d219"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":89,"style":"ITALIC"}],"text":"Теперь настало время снова посетить ваш веб-сайт, посмотреть на результаты ваших трудов. Обратите внимание, что URL-адрес явно показывает значение имени пользователя. Попробуйте изменить URL-адрес в браузере, чтобы увидеть и проанализировать изменения.","type":"unstyled","key":"fjim0"},{"data":{"image":{"id":"61a3f3c632dbb45907c08e8f"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"http://localhost:3000/#/profile/percybolmer — ссылка на страницу профиля","type":"atomic:image","key":"1s0ue"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"useLocation","type":"header-three","key":"3ojmf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":0,"style":"ITALIC"}],"text":"Передача данных через React Router","type":"unstyled","key":"43d7k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как вы уже догадались, не стоит добавлять слишком много URL-параметров, более того, с помощью параметра передаются только строки, а вам, скорее всего, понадобится передавать куда более разнообразные данные.","type":"unstyled","key":"5t4da"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"К счастью, всё возможно благодаря state, переменной состояния в ссылках: каждая ссылка может иметь свой параметр to для получения данных, опосля передающихся через переменную состояния с помощью хука useLocation.","type":"unstyled","key":"o0re"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В объекте to обязательно должны устанавливаться переменная состояния state и переменная pathname — это конечная точка URL.","type":"unstyled","key":"9faq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"{\n\"pathname\": \"url\",\n\"state\": {\n \"yourstatevar\": \"value\"\n }\n}","type":"unstyled","key":"1t1r6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":26,"style":"ITALIC"},{"length":14,"offset":82,"style":"ITALIC"}],"text":"И вот теперь вы думаете: “Отлично, пора запускать!”; однако на всех форумах вроде Stack Overflow регулярно задаются вопросы, которые мы сразу же и рассмотрим в данном руководстве.","type":"unstyled","key":"5gnuq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"“Да, я специально допустил ошибки, чтобы убедиться, что мы их устраним.” — Злой Учитель Программирования.","type":"blockquote","key":"ahj7d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Две самые распространенные среди новичков проблемы:","type":"unstyled","key":"5cku5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"HashRouter не поддерживает хук useLocation","type":"ordered-list-item","key":"2jp5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Нельзя размещать маршрутизатор Router внутри компонента, который размещает маршрутизатор в дереве.","type":"ordered-list-item","key":"3auco"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":93,"style":"ITALIC"}],"text":"Для начала разберёмся с первой проблемой — несовместимостью HashRouter и хука useLocation. Важно это знать, а также очень важно подчеркнуть это в документации. Именно из-за данной проблемы мы заменим HashRouter на BrowserRouter. Единственное изменение, которое нужно сделать — изменить идентификатор и убедиться, что BrowserRouter корректно импортирован.","type":"unstyled","key":"68ihu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"А пока мы меняем маршрутизатор, то нужно решить проблему номер два: просто перенесите Router в файл index.js, что заставит компонент Router обернуть всё приложение и, таким образом, он перестанет быть частью компонента, добавляющего сам Router в дерево. Вот код:","type":"unstyled","key":"6u8vq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport reportWebVitals from './reportWebVitals';\nimport { BrowserRouter } from \"react-router-dom\";\nReactDOM.render(\n \n \n \n \n ,\n document.getElementById('root')\n);\n\n// Если вы хотите измерить производительность приложения, то передайте функцию\n// для регистрации результатов (например: reportWebVitals(console.log))\n// или отправьте её в конечную точку аналитики.\nreportWebVitals();","type":"unstyled","key":"e3j4f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Index.js — маршрутизатор браузера оборачивает приложение","type":"unstyled","key":"cvgf0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Далее удалим маршрутизатор из файла main.js:","type":"unstyled","key":"3qm20"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import Navbar from '../components/navbar/navbar'\nimport { Switch, Route } from \"react-router-dom\";\nimport Home from '../components/home/home'\nimport Contact from '../components/contact/contact'\nimport About from '../components/about/about'\nimport Profile from '../components/user/profile'\nfunction Main() {\n return (\n

\n \n \n

\n \n \n \n \n \n \n \n \n

\n\n

\n )\n}\n\nexport default Main;","type":"unstyled","key":"flpa2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Main.js — в файле больше нет маршрутизатора","type":"unstyled","key":"1uokv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Затем слегка перепишем код в файле navbar.js, ведь необходимо убедиться, что объект to передает больше данных, чем раньше. Код приведен ниже:","type":"unstyled","key":"cqau0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { NavLink } from \"react-router-dom\";\n\nfunction Navbar() {\n return (\n

Navbar

Home
Contact
About
Profile

\n )\n}\n\nexport default Navbar;","type":"unstyled","key":"e7q72"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Функция Navbar с объектом to в ссылке","type":"unstyled","key":"41s8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И напоследок пропишем хук useLocation; из примера вы узнаете, как присвоить и переменную State, и переменную pathname. Данный сниппет почти ничем не отличается от применения хука useParams:","type":"unstyled","key":"6i7dh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { useParams, useLocation } from \"react-router-dom\";\nimport React from 'react';\n\n\nconst Profile = () => {\n // Используйте хук useParams для получения имени пользователя из URL. \n // Имя пользователя должно быть применено в качестве именованного параметра в маршруте. \n let { username } = useParams();\n // useLocation применяется для захвата состояния из входных данных в объект. \n // Так можно захватить каждое поле в объекте, используя то же имя, что и имя переменной. \n let { pathname } = useLocation(); \n let { state } = useLocation();\n\n return (\n

{username} Profile

Registered on:{state.registrationdate}

Visiting: {pathname}

\n )\n}\n\nexport default Profile;","type":"unstyled","key":"8enur"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Profile.js — хук useLocation применяется дважды","type":"unstyled","key":"eobn8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":93,"style":"ITALIC"}],"text":"Снова перейдите по ссылке localhost:3000, проанализируйте поведение и внешний вид веб-сайта. Заметьте, как изменились URL после удаления HashRouter:","type":"unstyled","key":"5lrte"},{"data":{"image":{"id":"61a3f3c607ce7a63cdc3d332"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"http://localhost:3000/profile/percybolmer — отображение данных из хука useLocation","type":"atomic:image","key":"1lpfh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"useHistory","type":"header-three","key":"eq18b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":0,"style":"ITALIC"}],"text":"Программная маршрутизация","type":"unstyled","key":"9j0ka"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Иногда требуется программно перенаправлять пользователя по ссылке на основе какого-либо события: вам пригодится хук useHistory, возвращающий объект истории для перенаправления браузера по нужному пути. Данный хук крайне прост в применении: при одновременном использовании объекта history и push(route) произойдёт перенаправление браузера.","type":"unstyled","key":"fvcld"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь давайте сделаем тег

в навигационной панели кнопкой, перенаправляющей пользователя на домашнюю страницу при нажатии на неё.","type":"unstyled","key":"9h8d7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Далее мы применим тот же самый подход, что и раньше: присвоим переменную с помощью хука, на этот раз — useHistory.","type":"unstyled","key":"dff7p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { NavLink , useHistory} from \"react-router-dom\";\n\nfunction Navbar() {\n let history = useHistory();\n\n function goHome(path) {\n history.push(\"/\");\n }\n\n return (\n

\n \n

Home
Contact
About
Profile

\n )\n}\n\nexport default Navbar;","type":"unstyled","key":"3b4ks"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"navbar.js — пример useHistory для перенаправления браузера","type":"unstyled","key":"58t41"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Наконец-то в последний раз перейдите по ссылке localhost:3000 и посмотрите на финальный результат своих трудов. Теперь перейдите на любую страницу, кроме стартовой по адресу /, а затем нажмите на кнопку: вуаля, вас перенаправило обратно на главную!","type":"unstyled","key":"291si"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Читайте также:","type":"unstyled","key":"413cm"},{"data":{},"depth":0,"entityRanges":[{"key":10,"length":30,"offset":0}],"inlineStyleRanges":[],"text":"1 Кодовая база - 3 платформы","type":"unordered-list-item","key":"9pqtp"},{"data":{},"depth":0,"entityRanges":[{"key":11,"length":57,"offset":0}],"inlineStyleRanges":[],"text":"Создаем темный режим, используя React и Styled Components","type":"unordered-list-item","key":"5i735"},{"data":{},"depth":0,"entityRanges":[{"key":12,"length":28,"offset":0}],"inlineStyleRanges":[],"text":"React SPA SEO с Prerender.io","type":"unordered-list-item","key":"8mras"},{"data":{},"depth":0,"entityRanges":[{"key":13,"length":8,"offset":14},{"key":14,"length":2,"offset":24}],"inlineStyleRanges":[],"text":"Читайте нас в Telegram, VK","type":"unstyled","key":"ei3cu"},{"data":{},"depth":0,"entityRanges":[{"key":15,"length":12,"offset":15},{"key":16,"length":61,"offset":29}],"inlineStyleRanges":[{"length":7,"offset":0,"style":"ITALIC"}],"text":"Перевод статьи Percy Bolmér: How To Implement a Single Page Application Using React-Router","type":"unstyled","key":"76h8k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"mLfRJUiBwOaHuJp63iqf"}],"entityMap":{"11":{"data":{"href":"https://nuancesprog.ru/p/13874/","url":"https://nuancesprog.ru/p/13874/"},"mutability":"MUTABLE","type":"LINK"},"12":{"data":{"href":"https://nuancesprog.ru/p/14260/","url":"https://nuancesprog.ru/p/14260/"},"mutability":"MUTABLE","type":"LINK"},"13":{"data":{"href":"https://t.me/nuancesprog","url":"https://t.me/nuancesprog"},"mutability":"MUTABLE","type":"LINK"},"14":{"data":{"href":"https://vk.com/nuancesprog","url":"https://vk.com/nuancesprog"},"mutability":"MUTABLE","type":"LINK"},"15":{"data":{"href":"https://percybolmer.medium.com/?source=post_page-----cc6b9e5c3aec-----------------------------------","url":"https://percybolmer.medium.com/?source=post_page-----cc6b9e5c3aec-----------------------------------"},"mutability":"MUTABLE","type":"LINK"},"16":{"data":{"href":"https://betterprogramming.pub/how-to-implement-a-single-page-application-using-react-router-cc6b9e5c3aec","url":"https://betterprogramming.pub/how-to-implement-a-single-page-application-using-react-router-cc6b9e5c3aec"},"mutability":"MUTABLE","type":"LINK"},"0":{"data":{"url":"https://nuancesprog.ru/p/14657/"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://nuancesprog.ru/media/4716da0c2643564873c453da03ff53c2","url":"https://nuancesprog.ru/media/4716da0c2643564873c453da03ff53c2"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://reactrouter.com/core/api/Router","url":"https://reactrouter.com/core/api/Router"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://reactrouter.com/web/api/HashRouter","url":"https://reactrouter.com/web/api/HashRouter"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"href":"http://localhost:3000/#/about","url":"http://localhost:3000/#/about"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"href":"https://reactrouter.com/web/api/BrowserRouter","url":"https://reactrouter.com/web/api/BrowserRouter"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"href":"https://reactrouter.com/web/api/Route","url":"https://reactrouter.com/web/api/Route"},"mutability":"MUTABLE","type":"LINK"},"7":{"data":{"href":"https://reactrouter.com/web/api/Switch","url":"https://reactrouter.com/web/api/Switch"},"mutability":"MUTABLE","type":"LINK"},"8":{"data":{"href":"https://reactrouter.com/web/api/NavLink","url":"https://reactrouter.com/web/api/NavLink"},"mutability":"MUTABLE","type":"LINK"},"9":{"data":{"href":"https://reactrouter.com/web/api/NavLink","url":"https://reactrouter.com/web/api/NavLink"},"mutability":"MUTABLE","type":"LINK"},"10":{"data":{"href":"https://nuancesprog.ru/p/11029/","url":"https://nuancesprog.ru/p/11029/"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}