Links in React Router | NavLink | Link | Href Link
Hi guys,
In this lesson, we will talk about the differences between router link elements. We can specify the links in react with three different ways. First one is a pure html reference. Second one is Link. And the third one is NavLink.
Pure html reference is a typical anchor link element. So when we click the link, the whole application is reloaded from the beginning. So this is not an effective way in the react.
Link and NavLink are similar things in react-router. The only difference between the two of them is that nav-link gives us a couple of additional things. We can add in here, activeClassName and that will automatically tie your css class to the current URL.
NavLink covers all functionalities of Link. So we can find all features in the NavLink that Link has.
NavLink also has “strict” and “exact” props.
Strict prop checks all slashes in the path.
When the NavLink path has a trailing slash, and you would like to match this path, including the trailing slash, then include the strict prop. For example, after changing the NavLink path from '/pathOne to '/pathOne/', the NavLink component would still match the URL path without the trailing slash. In other words, '/pathOne would match the NavLink component with the '/pathOne/' path.
However, after adding the strict prop, React-Router ensures that NavLink matches only if the URL has a trailing slash.
NavLink also has exact prop.
When you click on the NavLink with the to prop /pathOne, the active class is applied to both the NavLink components in the page. Similar to the Route component, the / in /pathOne matches the path specified in the to prop, and thus the active class is applied to both the NavLink components.
In this case, the exact prop can be used to apply the active class only when the path matches the browser's URL.
Ok. We got them. But what is the difference between exact and strict?
If you use exact and strict together, then the location.pathname will only match exactly as provided in path props.
For example, if we have a path /pathOne/, then it matches with only /pathOne/. Not /pathOne or /pathOne/pathTwo
If you use only strict, then the location.pathname will match which have trailing slash.
For example, if we have a path /pathOne/, then it can match with /pathOne/ or /pathOne/pathTwo. So it can match every path that starts with the /pathOne/.
If you use only exact, then the location.pathname will match the exact location path.
For example, if we have a path /pathOne/, then it can match with /pathOne/ or /pathOne. The exact prop doesn't care for trailing slash. But it will not match /pathOne/pathTwo.
That’s all for the beginning.
We will see example cases about them in our course.
Thank you.
Смотрите видео Links in React Router | NavLink | Link | Href Link онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Senol Atac 30 Январь 2022, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 521 раз и оно понравилось 7 людям.