какая разница между link navlink в react router
Recap:
Hello guys
In our previous tutorial, we learned how to add simple routes to our react app.
Today will be a short tutor on when to use NavLink and Link tags in React and we shall concentrate on the Nav component created in the last tutorial. Link
Overview
Before getting started, it is important to know that react uses the JSX(JavaScript XML) syntax which allows you to write JavaScript in HTML in a nice and easy way.
For more details about JSX, Click here
What is NavLink and Link in React?
The react-router-dom parckage we installed in the previous tutorial gives your access to using either the NavLink or the Link which we can use as tags, This is actually is the representation of the ‘href’ attribute of the anchor tag or the ‘window.location.href’ object.
What is the difference between NavLink and Link?
Well actually, the main difference between these two’s is a class attribute. When we use the NavLink as a tag, it automatically inherit an active class when clicked. On the other hand, the Link tag does now have an active class when clicked.
When should I use the NavLink?
Just as the name implies ‘NavLink’, we use it mostly on navigation bars. This is because the active class permits us to define our custom styling in the App.css stylesheet. As such, we can use it to style our active buttons which in notify the use on which page he/she is currently on.
When should I use the Link?
The Link tag can be used where we want to do just some routing with no special effect. For instance; we can use the Link tag for scroll-to-top button, add to card buttons, submit button and more.
Подробно о React Router. Часть 3— редиректы, передача props компоненту роута и вложенные роуты +бонус
В этой серии статей вы подробно и доходчиво узнаете о том, как работает Router в React, как его можно использовать и другие интересные фишки этого функционала. Это завершающая часть, в ней будет рассказано о передаче пропсов компоненту роута, редиректах и вложенных роутах. + бонус, стилизация активных элементов навигации.
p.s статья описывает самый распространенную версию роутера на данный момент. 6я версия сейчас находится в альфе и имеет кардинально другой синтаксис.
Передаём пропсы компоненту роута
Мы видели несколько примеров и рабочих кейсов в React роутере. Один из них это передача пропсов напрямую компоненту самого роута.
В React-router это делается очень легко. Давайте создадим новый роут для передачи props его компоненту.
Прямо сейчас мы добавили компонент и новую страницу. Давайте передарим пропс title уже самой странице.
Есть два способа это сделать. Первый очень простой.
Передаём функцию как пропс компонента в компоненте роута
Эта штука сработает, но такой подход не рекомендуется применять с роутером. Почему? Сейчас объясню.
Под капотом React использует React.createElement для рендеринга компонента, переданного пропсу компонента. Если мы передадим ему функцию, то он создаст новый компонент при каждом рендере, вместо того, чтобы просто обновить уже существующий компонент.
В маленьких приложениях с довольно несложными страницами, это не будет влиять на производительность. Но для больших приложений с множественным изменением состояния на странице, это значительно снизит производительность из-за необязательных циклов ре-рендеринга.
Вот это уже рекомендуемый способ передачи самих пропсов в React роутере.
Это очень просто. Если вы хотите увидеть весь пример, то проверьте его тут.
Редиректим роуты
В основном редиректы используют при проверке пользователей на авторизацию, если пользователь не авторизован, то его перенаправит на соответствующую страницу.
Давайте посмотрим на простой пример того, как он работает. Давайте создадим простую страницу, которая перенаправит на другую страницу основываясь на заданных условиях.
Давайте перенаправим с /old-route на /new-route
Простой пример редиректа
Добавляем роут редиректа в наш пример.
Сейчас мы создадим два URL.
Тут вы увидите, что старая ссылка редиректит на новую ссылку и тут же показывает его в браузере.
Редирект посложнее, основанный на пропсах
Давайте сначала сделаем страничку.
Давайте укажем роут для страниц Auth и Dashboard :
Вложенные роуты и контент
До этого мы видели простые примеры работы с реакт роутером. А сейчас мы разберемся с тем, как работать с вложенными роутами. Перед тем как углубиться в них давайте поймем, что же это такое?
Примеры вложенных роутов
Этот роут показывает всех пользователей.
Вложение первого уровня:
Эти примеры роутов показывают конкретного пользователя. Param и miguel это userId используемые для получения данных о конкретных пользователях.
Вложение второго уровня:
www.example.com/user/param/employer Этот роут получает простую информацию о пользователе и также информацию о его работодателе. Так что можно сказать, что это вложенные роуты. А вложения второго уровня уже зависят от параметров вложения первого уровня ( userId: param )
Давайте начнем с конкретного примера. Мы собираемся показать пользователей и затем вывести детальную информацию о них.
Вложенные роуты в React Router
Для примера мы возьмем вот эти данные:
В этом примере есть несколько пользователей и каждый из них имеет разное количество вложенных табов, в каждом из которых есть имя и контент, который мы покажем.
Используя эти данные мы создадим эти роуты:
Вложение первого уровня:
Вложения второго уровня:
Показываем вложения первого уровня
Тут мы пробегаемся по всем данным пользователей и показываем ссылку на каждого пользователя с данными о нем.
Компонент UserPage покажет простую информацию о конкретном пользователе.
Показываем вложенные роуты как табы
Тут мы создаем вложенные роуты, используя информацию для табов у каждого пользователя.
match.path уже выдаёт нам имя пути. Его мы будем использовать для указания вложенной схемы роута.
Именно поэтому match.url находится в Link, а match.path используется в определении роута.
Находим таб в наших данных, используя оба параметра
Показываем информацию таба
Следовательно, мы показали вложенные роуты и вложенный контент в этом примере.
Посмотрим пример в действии.
БОНУС: Используем для указания того, какой элемент активен в панели навигации
Вы можете также импортировать и :
Оба они компилируются в html код, как тут:
Может показаться, что основной их функционал одинаков. Так зачем же нам тогда оба? А затем, что идёт вместе с дополнительным атрибутом стилизации, который позволяет нам стилизовать по особенному именно активную ссылку.
CSS селекторы описанные ниже, рендерят линию подчеркивания в тех случаях, когда мы наводим на ссылку и когда она открыта и активна.
Email подписка!
Простой туториал React Router v4
React Router v4 — это переработанный вариант популярного React дополнения. Зависимые от платформы конфигурации роутов из прошлой версии были удалены и теперь всё является простыми компонентами.
Этот туториал покрывает всё что вам нужно для создания веб-сайтов с React Router. Мы будем создавать сайт для локальной спортивной команды.
Хочешь посмотреть демку?
Установка
React Router v4 был разбит на 3 пакета:
react-router предоставляет базовые функции и компоненты для работы в двух окружениях(Браузере и react-native)
Router
При старте проекта вам нужно определить какой тип роутера использовать. Для браузерных проектов есть BrowserRouter и HashRouter компоненты. BrowserRouter — следует использовать когда вы обрабатываете на сервере динамические запросы, а HashRouter используйте когда у вас статический веб сайт.
История — History
Каждый Router создает объект history который хранит путь к текущему location[1] и перерисовывает интерфейс сайта когда происходят какие то изменения пути.
Остальные функции предоставляемые в React Router полагаются на доступность объекта history через context, поэтому они должны рендериться внутри компонента Router.
Заметка: Компоненты React Router не имеющие в качестве предка компонент Router не будут работать, так как не будет доступен context.
Рендеринг Router
Компонент Router ожидает только один элемент в качестве дочернего. Что бы работать в рамках этого условия, удобно создать компонент который рендерить всё ваше приложение(это так же важно для серверного рендеринга).
App компонент
Routes
компонент это главный строительный блок React Router’а. В том случае если вам нужно рендерить элемент в зависимости от pathname URL’ов, то следует использовать компонент
Path — путь
принимает path в виде prop который описывает определенный путь и сопоставляется с location.pathname.
В примере выше сопоставляет location.pathname который начинается с /roster[2]. Когда текущий location.pathname сопоставляется положительно с prop path то компонент будет отрендерен, а если мы не можем их сопоставить, то Route ничего не рендерит[3].
Заметка: Когда речь идет о пути React Router думает только о пути без домена. Это значит, что в адресе:
React Router будет видеть только /my-projects/one
Сопоставление пути
npm пакет path-to-regexp компилирует prop path в регулярное выражение и сопоставляет его против location.pathname. Строки path имеют более сложные опции форматирования чем объясняются здесь. Вы можете почитать документацию.
Когда пути сопоставляются создается объект match который содержит свойства:
Заметка: path в Route должен быть абсолютным[4].
Создание наших роутов
У нашего веб-сайта пути которые мы хотим сопоставлять такие:
Что делает рендер компонента Route?
У Route есть 3 props’a которые описывают каким образом выполнить рендер сопоставляя prop path с location.pathname и только один из prop должен быть представлен в Route:
В типичных ситуациях следует использовать component или render. Children prop может быть использован, но лучше ничего не делать если path не совпадает с location.pathname.
Сейчас мы опишем основную структуру роутера. Нам просто нужно отобразить наши маршруты. Для нашего приложения мы будем использовать компонент и компонент внутри нашего компонента который поместит сгенерированный HTML удовлетворяющий сопоставлению path внутри.
Унаследованные роуты
В компоненте Roster мы создадим компоненты для двух путей:
Может быть полезным группирование роутов которые имеют общие компоненты, что позволяет упростить родительские маршруты и позволяет отображать контент который относиться к нескольким роутам.
Параметры в path
будет использовать props.match.params для получения нужной информации которую следует отрендерить.
Заметка: Вы можете больше изучить о параметрах в путях в пакете path-to-regexp
Наряду с компонентом
Ссылки
Работающий пример
Весь код нашего веб сайта доступен по этому адресу на codepen.
Route готов!
Надеюсь теперь вы готовы погрузиться в изучение деталей маршрутизации веб приложений.
Пояснения
[1] — Объект location описывает разные части URL’a
[3] — Если вы используете prop children то route будет отрендерен даже если path и location.pathname не совпадают.
[6] — Компоненты и могут оба использовать prop location. Это позволяет сопоставлять их с path, который фактически отличается от текущего URL’а.
There seems to be some confusion with what to use over the other:
I have been using React/Router for a little while now, and different posts/answers say different things regarding when to use these, and sometimes they don’t line up with what someone else said. So I think I need some clarification on this.
From what I understand about Link and this documentation it:
Provides declarative, accessible navigation around your application.
From what I understand about Redirect and this documentation it:
Will navigate to a new location. The new location will override the current location in the history stack, like server-side redirects (HTTP 3xx) do.
It seems like all the posts I have read almost everyone uses Redirect to navigate around there application, and no one ever recommends using Link like in this post.
Now history can do the same thing as Link and Redirect except I have a history stack trace.
Question 2: Since history can route a user to another location in-app with the added bonus of the history stack, should I always just use the history object when routing?
Question 3: If I want to route outside of the app, what’s the best method to do so? Anchor tag, Window.location.href, Redirect, Link, none of the above?
1 Answer 1
React Router’s BrowserRouter maintains the history stack for you, which means that you rarely need to modify it manually.
But to answer your questions:
Answer 1: You’ll want to use Link or NavLink in almost all use cases. Redirect comes in handy in specific situations though, an example is when a 404 page is rendered when the user tries to access an undefined route. The Redirect will redirect the user from the 404 route to a new route of your choosing, and then replace the last entry in the history stack with the redirected route.
This means that the user will not be able to hit their browser’s back button, and return to the 404 route.
Link NavLink and Redirect all use the router’s history api under the hood, using these components instead of history manually means that you are safe to any changes to the history api in the future. Using these components future-proofs your code.
Answer 2: BrowserRouter Maintains the history stack for you, generally my opinion is that you want to stay away from manually updating it where you can.
Answer 3: Here are a few examples for external react links:
target=’_blank’ will open the link in a new tab, but please make sure to include rel=’noopener noreferrer’ to prevent against vulnerabilities
Какая разница между link navlink в react router
The primary way to allow users to navigate around your application. Link > will render a fully accessible anchor tag with the proper href.
A Link > can know when the route it links to is active and automatically apply an activeClassName and/or activeStyle when given either prop. The Link > will be active if the current route is either the linked route or any descendant of the linked route. To have the link be active only on the exact linked route, use IndexLink > instead or set the onlyActiveOnIndex prop.
Props
A location descriptor. Usually this is a string or an object, with the following semantics:
query (Deprecated see to )
An object of key:value pairs to be stringified.
hash (Deprecated see to )
Note: React Router currently does not manage scroll position, and will not scroll to the element corresponding to the hash. Scroll position management utilities are available in the scroll-behavior library.
state (Deprecated see to )
activeClassName
The className a Link > receives when its route is active. No active class by default.
activeStyle
The styles to apply to the link element when its route is active.
onClick(e)
onlyActiveOnIndex
others
Example
Given a route like Route path = » /users/:userId » /> :