React Router V5 vs V6

React Router is widely appreciated in React apps for handling routing and navigation. It provides a way to configure routes. Show components based on the current URL. The newest release, React Router v6 introduces changes and improvements compared to the version of React Router v5. This article will explore the differences between React Router v6 and v5.

Comparison of React Router v6 vs React Router v5:

React Router version 5 is a used library in many React applications offering components and tools for managing routing and navigation. Developers can set up routes display components based on those routes manage navigation events and share route parameters with components using React Router v5. On the other hand, React Router version 6 is the most recent update to the library bringing various enhancements and changes. Its goal is to streamline routing processes and present a user-friendly interface. React Router v6 introduces an approach to routing known as “Component Based Routing ” removing the distinction, between “route components” and “route rendering components” seen in v5.

• In React Router version 5 navigation is managed through the <Router> <Switch> and <Route> elements. The precise attribute, in the <Route> element guarantees that only the exact path is matched.
• In React Router version 6 the <Router> component stays consistent however the <Switch> component gets substituted by the <Routes> component. The element attribute is employed in the <Route> component to display the component.

React Router v5:

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </Router>
  );
}

React Router v6:

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Router>
  );
}

Key Features of React Router:

React Router v5:

• Nested routing
• Router parameters
• Query parameters
• Router guarding (using route component’s render prop )

React Router v6:

• Simpler and more intuitive API
• Improved code splitting and lazy loading
• Relative routes
• Parallel routing
• Automatic scrolling to top on navigation

Upgrades from React Router V5 to V6

Switch Replaced with Routes:

React Router v6 introduces an update by swapping out the <Switch> component with the <Routes> component. Unlike in React Router v5 where the <Switch> component exclusively displayed the matching route in React Router v6, the <Routes> component is utilized to outline all routes in our application. This change provides flexibility and control, over how routes are structured and nested.

In version 5 we did it like this:

Javascript

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

function App() {
    return (
        <BrowserRouter>
            <div className="App">
                <Switch>
                    {" "}
                    {/* Single Routes come in here */}
                </Switch>
            </div>
        </BrowserRouter>
    );
}
export default App;

This is how we will do it in version 6:

Javascript

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

function App() {
    return (
        <BrowserRouter>
            <div className="App">
                <Routes>
                    {" "}
                    {/* Switch changes to Routes */}
                    {/* Single Routes come in here */}
                </Routes>
            </div>
        </BrowserRouter>
    );
}

export default App;

Changes in the way we define our Routes:

In React Router version 5 routes were set up using the element, which had to be included in a element. In React Router version 6 defining routes has become easier. Now routes can be directly specified within the element without requiring a element. This update simplifies route configuration. Removes the need, for unnecessary component nesting.

The exact Prop is Not Needed Anymore:

In React Router version 5 the exact prop was utilized to guarantee matching of a route with the specified path. Nevertheless in React Router version 6 the exact prop is no longer necessary. Rather the route matching function now defaults to being exact. This adjustment streamlines the route setup. Removes the necessity, for explicitly using the exact prop.

In v5:

Javascript

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

<Switch>
    <Route path="/">
        <Home />
    </Route>
    <Route exact path="/Geeksforgeeks">
        <Geeksforgeeks />
    </Route>
    <Route exact path="/geek/:geekID">
        <GeekDetails />
    </Route>
    <Route exact path="/Articles">
        <Articles />
    </Route>
</Switch>

In v6:

Javascript

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

<Routes>
    <Route path="/" element={<Home />} />
    <Route path="/geeks/:geekID" element={<GeekDetails />} />
    <Route path="/geeksforgeeks" element={<Geeksforgeeks />} />

    <Route path="/articles" element={<Articles />} />
</Routes>

No Need to Install react-router-config Anymore:

In versions of React Router like v5 if we wished to implement configuration based routing we had to add a separate package known as react router config. In the latest version of React Router v6 there’s no need to install react router config separately anymore. The configuration based routing is now. Can be accomplished using the <Routes> component along, with an array of route objects.

//V5
import { renderRoutes } from "react-router-config";

const routes = [
    {
        path: "/",
        exact: true,
        component: Home
    },
    {
        path: "/geeksforgeeks",
        exact: true,
        component: Geeksforgeeks
    },
    {
        path: "/articles",
        exact: true,
        component: Articles
    }
];

export default function App() {
    return (
        <div>
            <Router>{renderRoutes(routes)}</Router>
        </div>
    );
}




//V6
function App() {
    let element = useRoutes([
        // These are the same as the props you provide to <Route>
        { path: "/", element: <Home /> },
        {
            path: "/geeksforgeeks", element: <Geeksforgeeks />,
            // Nested routes use a children property
            children: [
                { path: ":geekId", element: <GeekDetails /> },
            ]
        },
        {
            path: "/articles",
            element: <Articles />
        },
    ]);

    // The returned element will render the entire element
    // hierarchy with all the appropriate context it needs
    return element;
}

Transition from useHistory to useNavigate:

In React Router version 5 many developers relied on the hook to interact with the history object and move between routes programmatically. In React Router version 6 the useHistory hook has been substituted with the useNavigate hook. This new hook serves a purpose to useHistory by enabling us to navigate programmatically within a React component. This adjustment introduces an user friendly and uniform approach to navigation, within React Router version 6.

activeStyle and activeClassName Props Removed From <NavLink/>:

In React Router version 5 the <NavLink> component included features like activeStyle and activeClassName to style or add classes to the link depending on the current route.. In React Router version 6 these features have been taken out. Instead the <NavLink> component now has an activeClassName feature that lets you apply a class to the active link. This adjustment makes the API simpler. Fits well with React Routers emphasis, on composability.

Replace Redirect with Navigate:

In React Router version 5 the <Redirect> element was utilized to steer the user to a route. In React Router version 6 the <Redirect> component has been swapped out with the navigate function allowing for programmatically moving to a different route. This modification offers a succinct and uniform approach to managing redirects, in our application.

Javascript

//V5
import { Redirect } from "react-router-dom";

<Route exact path="/New-courses">
    <Redirect to="/courses">
</Route>
<Route exact path="/courses">
    <Courses />
</Route>


//V6
import { Navigate } from "react-router-dom";

<Route path="/latest-courses" element={<Navigate replace to="/courses">} />
    <Route path="/courses" element={<Home />} />

Difference between React Router v6 React Router v5

React Router v6	React Router v5
npm install react-router@next	npm install react-router-dom
JSX-based <Route> component composition	JSX-based <Route> component composition
Fully declarative, no order dependencies	Sequential matching with order dependencies
Improved support with <Routes> component	Supported using nested <Route> components
<Link> and useNavigate hook	<Link> component and history API
Access using useParams hook	Access using match.params in component
<Navigate> component and useNavigate	<Redirect> component and history.replace
Built-in support with lazy loading	Requires manual implementation
Declarative routing using <Route>	Declarative routing using <Route>
useNavigate hook for navigation	history API for navigation
Customizable with <Routes> transitions	Limited built-in transition capabilities
Rapidly growing community involvement	Mature and established community suppor