#11 of 100DaysOfCode

#100daysofcode #react

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>

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>

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.🌷

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →