DEV Community

Mustkim Khatik
Mustkim Khatik

Posted on

Quick Guide: React Router V6 Changes

React is Open Source and keep Evolving Project, that takes continuous Bug fixes, Introduces New feature and more!

React recently Updated React Router to V6 which have introduced major new Features and some changes to which we will take a look into!

Quick summery about REACT-ROUTER- WHAT IS REACT ROUTER?: Let's say you have a <Nav /> bar into your website with several <li> like 'shop, about, contact' etc. so react-routing help us to jump on this components with simple click on that text. that's the simple explanation to it

here are some major changes into REACT-ROUTER-V6:

  • instead of <switch>, that introduces new tag <Routes> which is advance version of <switch>, i.e now keyword 'exact' is not longer needed as has by-default behaviour of 'exact' keyword.
    (what is switch? : switch tag help us to jump on target page 'Exactly' for more info refer to : https://www.youtube.com/watch?v=jVtxC6CKzYU&ab_channel=kudvenkat)

  • while declaring <Route> path and component, now instead of component, use 'element={}' and component should be in jsx format
    (e.g <route path='/about' element={</About /> />)

  • Removed <Redirect> inside <switch>, now if you wanted to use <Redirect>, use it inside <Route>.

These were some major changes over V5, it's now more easier, faster, and powerful to use, comment more of the changes if you know! and That's pretty it.

Discussion (0)