React router V6

Hi Guys!

So recently , React Router V6 was released and it has many features. Lets look into some of these upgrades

**# Goodbye Switch 👋 **

Previously, in React Router V6, we used the <Switch> component to wrap all of our routes, now the switch component has replaced by <Routes>. It is essentially the same think as switch however some new features have been added to the <Route> component it self

## Changes to the Route Component

There have been a couple of useful upgrades to the <Route> component.

1 - No need of exact.

In v5, you needed to put exact prop on the component so that it goes to the particular route. However in V6, there is no need of exact prop as React Router now always looks for the exact path without being told.

2 - Introducing the element prop

Previously, we used to pass the component in the Route as a child or in other words, the component would be placed within the Route , in V6, this is no longer needed as you can simply pass the element prop in the route abd place the component inside it. the props of this are that you can simply inject whichever component one needs depending on its route rather than placing it in each route component

V5 vs V6 code example

the above mentioned upgrades are demonstrated in the comparison below

V5 Code

export default function App() {
  return (
    <div>
      <Switch>
        <Route path="/page1">
          <Page1/>
        </Route>
        <Route exact path="/page2">
          <Page2/>
        </Route>
      </Switch>
    </div>
  )
}

V6 Code

export default function App() {
  return (
    <div>
      <Routes>
        <Route path="/page1" element={<Page1/>} />
        <Route path="/page2" element={<Page2/>} />
      </Routes>
    </div>
  )
}

as you can see, 3 changes can be noticed in the above code comparison, Use of instead of , removal of exact prop and use of the element prop.

React router V6: Some of the new changes 🔥

Hi Guys!