Как обновить, чтобы отреагировать маршрутизатор 4

Автор оригинала: FreeCodeCamp Community Member.

Недолго после того, как я начал работать на моей текущей позиции, команда поняла, что нам будет необходимо обновить, чтобы отреагировать 16, поэтому мы могли бы использовать новую библиотеку пользовательской интерфейсы, которую мы стремились к принятию.

Чтобы выяснить, сколько времени потребуется в этом обновлении, мы посмотрели на все наши текущие пакеты, чтобы увидеть, были ли они совместимы с React 16, и посмотреть, все ли мы использовали неподдерживаемые или устаревшие пакеты.

Начало нашей кодовой базы было построено разработчиками, которые использовали все, что они хотели, ни библиотека с открытым исходным кодом или сторонней стороной, не вентилируя их. Таким образом, мы обнаружили, что многие пакеты были устаревшими и должны быть заменены как можно скорее.

Одна из самых больших сюрпризов для нас была обесценение React-Router-Redux Отказ Мы использовали React-Router-Redux В сочетании с реагированным маршрутизатором V3. Это привело к тому, что мы были критически думать о том, почему мы использовали redux в нашем роутере в первую очередь.

Как только мы начали смотреть в React Router V4, мы поняли, что новые функции будут в значительной степени устранить причину для нас, чтобы использовать дополнительную библиотеку для подключения нашего маршрутизатора и redux Отказ Итак, это оставило нас в положении, чтобы просто обновить из React Router 3-4, и удалить React-Router-Redux из нашего приложения.

Итак, мне было поручено обновить наш маршрутизатор к V4 после того, как находиться только в позиции и работать с реагированием в течение примерно 2 месяцев. Это было связано с тем, что модернизация от React Router 3, чтобы реагировать маршрутизатор 4 звучал, как это должно быть тривиальное предприятие. Но, как я быстро узнал, это было немного более вовлечено, чем я ожидал.

Глядя через Документация , Github Repo И многие, многие переполнители стека, ответы, я, наконец, собрал шаги для обновления и хотел поделиться своими выводами – особенно, чтобы объяснить, как и почему сделаны определенные изменения.

Самым большим изменением к примечанию, от создателей маршрутизатора RACT, состоит в том, что обновление от маршрутизатора RACT 3 для реагирования маршрутизатора 4 больше, чем просто обновление нескольких библиотек и функций – это позволяет вносить в основном изменения, как работает ваш маршрутизатор. Создатели React Router хотели вернуться к простому маршрутизатору, позволяя разработчику настроить его, однако они хотели бы.

Я разделил это руководство на 5 разных частей:

Упаковка
История
Маршрут
Реквизит
Редукс интеграция

Реагниальный маршрутизатор V4 Структура пакета изменилась такая, что больше не нужно устанавливать React-Mar Router – вы должны установить React-Router-DOM (и удалите React-Router ), но вы ничего не теряете, так как он повторно экспортирует все Реагистрационный маршрутизатор экспорт. Это означает, что вы также должны обновить любой Реагистрационный маршрутизатор Импорт заявления на React-Router-DOM Отказ

История – это неотъемлемая часть маршрутизации, позволяющая нам помнить, откуда мы пришли и где мы в настоящее время. История наступает во многих формах для реагирования-маршрутизатора и может занять некоторое время, чтобы объяснить. Итак, чтобы сохранить эту статью по теме, я просто рекомендую вам прочитать Эта статья Это объясняет история в отношении React Router 4. Эта статья должна охватывать большинство случаев вашего использования истории.

React Router V3 позволил нам разместить все наши прикладные маршруты в один файл, который мы позвоним Router.js. Однако React Router V4 позволяет размещать маршруты в компоненты, которые они рендерируют. Идея здесь – Динамически маршрут Приложение – другими словами, маршрутизация имеет место, поскольку приложение рендерируется.

Тем не менее, если у вас есть база наличия достойного размера, с которой вы работаете, вы, вероятно, не будете делать изменения, которые большой. К счастью, React Router V4 по-прежнему позволяет размещать все маршруты в центральный файл, что является тем, как я создаю все наши примеры. Однако есть несколько старых компонентов и функций, которые нуждаются в замене.

Indexroute.

Ранее Indexroute был использован в качестве маршрута по умолчанию UI родительского маршрута. Но, в V4, Indexroute больше не используется, поскольку эта функция теперь доступна в маршруте.

Для предоставления UI по умолчанию несколько маршрутов, имеющих тот же путь, позволит всем связанным компонентам рендеринга:

import { BrowserRouter as Router, Route } from 'react-router-dom';


    // example of our route components

Итак, все компоненты – Главная , О и Контакт – сделает. Из-за этого вы больше не можете гнездиться маршрутами.

Кроме того, чтобы обеспечить лучшее совпадение без использования Indexroute , вы можете использовать точное ключевое слово.

import { BrowserRouter as Router, Route } from 'react-router-dom';


    // example of our route components

Эксклюзивная маршрутизация

После добавления в точное ключевое слово, "fore.com/about" будет направлен, когда роутер видит путь "/О" Отказ Но теперь, что, если у вас есть другой путь, "/О"/Команда " ? Как я уже говорил, маршрутизатор сделает все, что соответствует. Итак, компоненты, связанные с обоими "/О" и "/О"/Команда " будет представлять. Если это то, что вы намереваетесь, то это здорово! Однако, если это не то, что вы хотите, вам, возможно, придется поставить переключатель этой группы маршрутов. Это позволит первый путь, который соответствует URL для рендеринга.

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

Обратите внимание, что ключевое слово точное еще должно появиться для домашнего компонента – в противном случае он будет соответствовать последующим маршрутам. Также обратите внимание, что мы должны перечислить "/О"/Команда " до "/О" Так что маршрут идет к Команда компонент вместо О Компонент, когда он видит "fore.com/about/team" Отказ Если он увидел "/О" Во-первых, он остановился бы там и визуализации О Компонент, потому что переключатель отображает только первый компонент, который соответствует.

Маршрут по умолчанию

Маршрут по умолчанию или маршрут «all All», обычно используемый для 404 страниц, это маршрут, который вы используете, когда ни одна из маршрутов не совпадает.

В React Router V3, по умолчанию Маршрут было:

<Компонент маршрута = {незначительно}/>

В React Router V4, по умолчанию Маршрут был изменен на:

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';


    
       
       
       
        // this is our default route

Когда вы не включаете путь в Маршрут компонент всегда будет рендер. Итак, как мы обсуждали выше, мы можем использовать Переключатель Чтобы получить только один компонент для рендера, а затем поместите «поймать все» маршрут очень последнее (так что он не использует это один до того, как маршрутизатор получает шанс проверить остальные пути), так что-то будет Всегда визуализация, даже если другие пути не совпадают.

одержатель

Раньше вы могли бы использовать ОНИГЕРА Чтобы убедиться, что компонент Маршрут Имеет все необходимую информацию или в качестве проверки (например, чтобы убедиться, что пользователь аутентифицирован) перед отображением компонента.

Эта функция была обесначена, поскольку новая структура маршрутов заключается в том, что они должны действовать как компоненты, поэтому вместо этого вы должны воспользоваться методами жизненного цикла компонентов.

В React Router V3:

<Маршрут OnEnter = {fetchedinfo} компонент = {команда}/>

Становится:

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

...

componentDidMount() {
    this.props.fetchInfo();
}

...

В React Router V4 реквизиты, прошедшие через маршрутизатор, изменились, как и к тому, как они обращаются. Маршрут теперь проходит три реквизита:

история
место расположения
матч

история

История Содержит много других свойств и методов, поэтому я не буду перечислять все они, но вот выбор, который может быть наиболее часто используемым:

Длина : количество записей в стеке истории
Расположение : содержит ту же информацию, что и ниже
Push (путь, [состояние]) : толкает новую запись в стеке истории
обратное () : Позволяет переместить указатель на стек истории назад 1 вход

Важно отметить, что История сметен, и пока он содержит Расположение Собственность, этот экземпляр Расположение не следует использовать, так как он мог быть изменен. Вместо этого вы хотите использовать фактический Расположение обсуждается ниже.

место расположения

Расположение имеет свойства:

путь
поиск
хэш
государственный

location.search используется для замены Местоположение И это должно быть проанализировано. Я использовал URLSearchParams разбирать его. Так что URL, такой как “https://something.com/about?string=’hello ‘” будет проанализирован как таковой:

...

const query = new URLSearchParams(this.props.location.search)
const string = query.get('string') // string = 'hello'

...

Кроме того, Государство Собственность может быть использована для передачи Расположение -Спецификация Государство компонентов через реквизиты. Итак, если вы хотели пройти некоторую информацию от одного компонента к другому, вы можете использовать его так:

...
// To link to another component, we could do this:


// However, if we wanted to add state to the location, we could do this:
const location = {
    pathname: '/path/',
    state: { fromDashboard: true },
}

...

Итак, когда мы доберемся до компонента, оказываемого этим путем, у нас будет доступ к FromDashboard от location.state.fromdashboard Отказ

матч

Матч Имеет следующие свойства:

Пармы : Получает динамические сегменты пути от URL-адреса – например, если путь – "/О нас/: id" в компоненте доступа к this.props.match.params даст вам удостоверение личности в URL
Isexact : true, если весь URL был сопоставлен
путь : путь в маршрутах, которые были сопоставлены
URL : Соответствующая часть URL

Как я решил ранее, мы обнаружили, что в нашем случае нам не нужно было иметь дополнительную библиотеку для подключения redux С нашим маршрутизатором, тем более, что наше основное использование для этого – заблокированные обновления – было покрыто React Router.

Заблокированные обновления

В некоторых случаях приложение не обновляется при изменении местоположения. Это называется «заблокированным обновлением». Это может произойти, если оба из этих условий выполнены:

Компонент подключен к Redux через Connect () (компонент) Отказ
Компонент не отображается <Маршрут>

В этих случаях я завернул соединение компонента с Возможность Отказ

Это позволило получить информацию маршрутизатора, чтобы следовать компоненту, когда он связан, поэтому приложение по-прежнему обновляется при изменении состояния Redux.

Вот и все!

Это обновление взяло меня за неделю – несколько дней попыток выяснить, как это вообще делать, а затем еще несколько дней, чтобы начать вносить изменения. Обновление для React Router 4 – огромное изменение, не следует воспринимать слегка, но он сделает ваш маршрутизатор намного более легким и простым в использовании.

Пожалуйста, не стесняйтесь комментировать/задавать вопросы!