Understanding React Router and React Router V6: Some of the new changes

So not too long ago the library React Router updated to version 6 and with that, it came with some exciting changes so I'm going to describe some of them

First, what is Routing?

Routing enables navigation from one view to another in a web application based on action or request. It is the ability to move from one page to another when a user clicks some element like a link, button, icon, image, and so on within the application.

In other words, it is a process in which a user is directed to different pages based on their action or request.

what is React Router?

React Router is a package for routing in React.js, as the documentation said?"React Router is a fully-featured client and server-side routing library for React, a JavaScript library for building user interfaces. React Router runs anywhere React runs; on the web, on the server with node.js, and on React Native."

Simply, It allows engineers to create routes for a React single-page application.

So now that we know the basics of it, let's talk about some new changes it had.

Replacing Switch component with Routes

If you have ever used React Router you know that we need to wrap our routes into this Switch component that makes sure that only one of these routes is loaded at the same time, instead of all matching routes. Something like this

import { Switch, Route } from "react-router-dom";

export function App(){
  return (
    <div>
      <Switch>
        <Route path="/about">
          <AboutPage />
        </Route>
        <Route exact path="/profile">
          <ProfilePage />
        </Route>
        <Route path="/profile/:id">
          <ProfileUserPage />
        </Route>
      </Switch>
    </div>
  )
}
        

Now with V6, we changed the name from Switch to Routes and now the Routes component has a new prop called an element, where you pass the component it needs to render inside this component.

Internal changes & path evaluation (no more needed exact prop)

So with this new version, some internal changes were made and the evaluation that React Router does for these paths and then picking a route to load changed. For V5 we needed to put the exact prop on the component to go for that specific route we want,?like this in the Profile path below

import { Switch, Route } from "react-router-dom";

export function App(){
  return (
    <div>
      <Switch>
        <Route exact path="/about">
          <AboutPage />
        </Route>
        <Route exact path="/profile">
          <ProfilePage />
        </Route>
        <Route exact path="/profile/:id">
          <ProfileUserPage />
        </Route>
      </Switch>
    </div>
  )
}        

If we do not put that exact prop it will render the path that starts with that path we pass and that's not what we wanted, now with V6 we don't need this prop anymore because React Router will always look for the exact path we pass, being like this

import { Routes, Route } from "react-router-dom";

export function App() {
  return (
    <div>
      <Routes>
        <Route path="/about" element={<AboutPage />} />
        <Route path="/profile" element={<ProfilePage />} />
        <Route path="/profile/:id" element={<ProfileUserPage />} />
      </Routes>
    </div>
  )
}        

Now let's talk about the Link component that we have, which still is on V6

NavLink activeClassName prop does not exist anymore

With that prop, you could pass a class for that specific Link to be modified with some CSS to show that it's become active, like this

export function Header() {
  return (
    <header>
      <ul>
        <li>
          <NavLink activeClassName="active" to="/about" />
        </li>
        <li>
          <NavLink activeClassName="active" to="/profile" />
        </li>
      </ul>
    </header>
  )
}        

With V6 you have to manually do that and you can by passing a function to the className prop we have on React, like this

export function Header(){ 
  return (
    <header>
      <ul>
        <li>
          <NavLink className={(navData) => navData.isActive ? "active" : "" } to="/about" />
        </li>
        <li>
          <NavLink className={(navData) => navData.isActive ? "active" : "" } to="/profile" />
        </li>
      </ul>
    </header>
  )
}        

Note that the React Router provides you with the navData argument and it's an object inside that has the isActive property that will be true if the route is active at that moment.

#reactjs #article #frontenddeveloper #100daysofcodechallenge

Thank you for reading !! ????

Happy Coding !! Happy Building !!