DEV Community

loading...
Cover image for #11 of 100DaysOfCode

#11 of 100DaysOfCode

icecoffee profile image atulit023 ・1 min read

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

Discussion (1)

Collapse
icecoffee profile image
atulit023 Author

Code formatting is pretty bad I agree. I just don't know how to do it in here.
If you got any ideas or tricks please feel free to share.
Thanks

Forem Open with the Forem app