5
#11 of 100DaysOfCode
source link: https://dev.to/icecoffee/11-of-100daysofcode-28ee
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Eleventh Day.
Today is all about routing.
List Of Things That I Learned Today
- How to use React Router? Just a note: React Router is a beautiful third-party library that can be used to implement lightning-fast client-side routing on our react application. It's a beauty for real. Most of all you can declare patterns to get your routes and then we can just use the useParams hook to read the route.
- Reading routes via use params.
- Applying a 404 page: Nothing too serious just check if you have received the data, if not return markup for 404 page.
- Implementing client-side navigation.
- Redirecting using the useNavigate hook.
- Link and NavLink components
<Link to='/nameOfTheRoute' >
<Element you want to show/> or Text
</Link>
Enter fullscreen modeExit fullscreen mode
Link is just a smart cousin of anchor tag it just got to attribute instead of href plus it's smart.
<NavLink
to='/nameOfTheRoute'
activeStyle={ObjectContainingStyles}
>
<Element you want to show/> or Text
</NavLink>
Enter fullscreen modeExit fullscreen mode
Link is smart but so is NavLink the only additional functionally it provides as you can see is activeStyle attribute and that is quite literal.
The additional styles that a nav link gets after we click on it.
Easy.
And that's all for today.π
Thanks for joining me, comment down below if you got any suggestions.
Have a wonderful day.π·
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK