React Router Dom Version 6.7.0

In this article, we will talk about the new version of react-router dom that was released on January 18, 2023, and the differences between this current version and the previous versions, its advantages and disadvantages and how to use it in your projects.

How to Install React Router

Firstly Create a react Application using the below syntax

npx create-react-app myapp

After creating your react application, Simply type npm install react-router-dom in your project terminal to install React Router, and then wait for the installation to finish.

Use the yarn add react-router-dom command if you're using yarn.

How to Set Up React Router Dom

After the installation, your react application should look something like this

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Now that we want to make our router globally visible, we first create a component called Router after that, we then add some boilerplate code that every useful react component must have. The boilerplate code will look something like this.

import React from 'react'

function Router() {
  return (
    <div>
      Router
    </div>
  );
}

export default Router;

After creating our boilerplate code, we want to create the pages that we want to be rendered in our route. Firstly, we Create a pages folder in our src folder that is created for us by default when we create our react application. Inside our pages folder, let us create three components and call them Home, Blog and About. So our React app directory should look something like this.

Now, Let us write the boilerplate code that we wrote for our Router Component inside each of the components that we created inside our pages folder, but not forgetting to change the name Router to the name of the page. For Example, the Home Component should look something like this

import React from 'react'

function Home() {
  return (
    <div>
      Home
    </div>
  );
}

export default Home;

After Creating the pages that we want to be used in our route, we then import the createBrowserRouter function, The pages that we created earlier and the React-Router dom RouterProvider from the react-router-dom package. An array of routes is provided as a parameter to the createBrowserRouter method. Each route is an object made up of a path, to which the route belongs, and an element, which is the component that is displayed to the user when they are on that route.

Now, let us create three routes inside of the createBrowserFunction and using the paths and elements as shown below

import {createBrowserRouter,RouterProvider} from "react-router-dom";
import Home from "./pages/Home";
import Blog from "./pages/Blog";
import About from "./pages/About";

const routerData = createBrowserRouter([
  { path: "/", element: <Home /> },
  { path: "/about", element: <About /> },
  { path: "/blog", element: <Blog /> },
]);

function Router() {
  return (
    <div>
      Router
    </div>
  );
}

export default Router

Now, this is saying that when the user visits the initial route, display the home Component, When he visits the about route, display the About Component and the same goes for the Blog Component. Now we have set up our routerData, How do we Link it inside out Application, This is where the RouterProvider that we imported earlier comes into play. Inside the Router Component that we created Earlier, we return the RouterProvider component while passing the routerData as a prop into it. Your entire Router component should look something like this

import {createBrowserRouter,RouterProvider} from "react-router-dom";
import Home from "./pages/Home";
import Blog from "./pages/Blog";
import About from "./pages/About";

const routerData = createBrowserRouter([
  { path: "/", element: <Home /> },
  { path: "/about", element: <About /> },
  { path: "/blog", element: <Blog /> },
]);

function Router() {
    return <RouterProvider router={routerData} />;
}

export default Router

Now we import this Router inside our App component and rather than wrapping it using a BrowserRouter around our application as done in previous versions, we just insert it directly into the top of our App component. Your App Component should then look something like this

import React from 'react'
import Router from './Router'

function App() {
  return (
    <div>
        <Router/>
        App
    </div>
  );
}

export default App;

And like that, we have successfully used react router dom version 6.7.0 to create routes in our application.

Pros and Cons of React Router Dom version 6.7.0

Pros:

1. The unmountOnExit prop allows developers to specify whether a component should be unmounted when the route is exited, which can improve performance and reduce memory usage.

2. The useNavigate hook provides a way to programmatically navigate to a different route in a React application, which can make it easier to handle user interactions in functional components and hooks.

3. It addresses a bug that caused the <Link> component to not correctly handle relative paths in some cases, making the app navigate to an incorrect location.

4. It fixes an issue that caused the <Switch> component to not correctly match routes in some cases, making the app navigate to the wrong route when there were multiple routes that matched the current location.

5. It includes a change to the way the <Route> component handles the path prop, which allows developers to use the path prop to specify a string or an array of strings, making it more flexible and easy to use.

Cons:

1. React Router 6.7.0 is not backwards compatible with previous versions, so developers need to update their code to the new syntax and API.

2. It is compatible with the latest version of React, React 17, so developers need to make sure they have the latest version of React installed before upgrading to React Router 6.7.0

3. As React Router is a third party library, sometimes it may not fully align with the latest version of React, which can cause some bugs.

Overall, React Router DOM version 6.7.0 is a powerful tool for client-side routing in React applications, with many new features and improvements that make it easier to use and more versatile. However, developers should be aware of the potential issues and be prepared to update their code and dependencies.