Как обновить React Router V6 за 4 шага

React-router версии 6 был выпущен, и это очень важно, потому что react-router является одним из наиболее часто используемых и наиболее важных пакетов реагирования, который вы обнаружите там, многие проекты реагирования нуждаются в маршрутизации, и поэтому многие проекты реагирования действительно используют реакцию. router в этой статье я расскажу вам, что нового в react-router версии 6, и, конечно же, я также покажу вам, как вы можете обновить существующее приложение react, использующее react-router версии 5, до версии react-router версии 6.

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

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

Теперь, чтобы увидеть, что изменилось, и написать некоторый код, я создал небольшой снимок, небольшой снимок проекта, ссылка на репозиторий git будет дана в конце этой статьи, действительно использует реактивный маршрутизатор версии 5, поэтому не использует версию 6.

Итак, как только вы загрузили и извлекли этот снимок, вы должны запустить npm install, чтобы установить все основные зависимости, которые поставляются с этим проектом, и как только вы это сделаете, вы должны установить react-router версии 6, и вы делаете это, запустив npm install react-router-dom и это важно, вам нужен react-router -dom, который является браузерной версией react-router, а затем добавьте @6, который гарантирует, что вы установите последнюю версию 6, и это то, что мы можем сделать здесь:

Итак, с этим установленным у нас есть реакция-маршрутизатор версии 6. и если я сейчас запущу npm start, вы увидите, что этот проект не будет работать, если я попытаюсь посетить эту страницу, теперь я получаю сообщение об ошибке, что переключатель не экспортируется из реакции-маршрутизатора -дом:

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

Теперь, когда в версии 6 react-router больше не существует коммутатора, вместо этого он становится маршрутом, поэтому вы заменяете коммутатор маршрутами, и поэтому вы импортируете маршруты из react-router-dom вместо коммутатора.

Кстати, что не изменилось, так это то, что вы по-прежнему импортируете маршрутизатор браузера из react-router-dom и оборачиваете его вокруг своего приложения, где затем планируете использовать маршрутизацию с точно таким же синтаксисом, как вы его знаете:

При этом ошибка исчезает, но если я нажму приветствие или продукты, вы увидите, что URL-адрес меняется, но я все равно ничего не вижу на экране:

Причина этого в том, что способ определения наших маршрутов также изменился, у нас все еще есть компонент маршрута, и он по-прежнему принимает свойство пути:

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

Таким образом, вы не передаете приветствие в виде строки, вы не передаете указатель на эту функцию компонента, вместо этого вы передаете элемент jsx, следовательно, элемент имени, который он хочет, элемент jsx, и тогда это может, конечно, стать самозакрывающимся компонентом этот компонент маршрута, и мы делаем то же самое здесь для продуктов, мы также добавляем реквизит элемента, а затем перемещаем продукты в этот реквизит, тогда как значение, которое мы устанавливаем как значение для этого реквизита, и мы превращаем его в самозакрывающийся компонент и последний, но не в последнюю очередь мы также делаем это для этого последнего маршрута, и обратите внимание, что это динамический маршрут, и он по-прежнему работает так, как вы его узнали, поэтому вы все еще можете иметь параметры динамического пути, такие как идентификатор продукта, как вы могли бы с пятой версией, которая не изменилась:

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

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

Ссылка на репозиторий Github