React Router DOM v6 with Examples and install

By /
react router dom v6

What is React Router DOM?

React Router DOM is a popular library in the React ecosystem that is specifically designed for web applications that use the DOM (Document Object Model) as the target platform.

React DOM provides routing functionality for building single-page applications (SPAs) with React that allows developers to create dynamic and responsive web applications with multiple views or pages without having to perform full-page reloads.

How React Router DOM works?

The library provides a set of components that allow developers to define routes and navigate between different views or pages in a React application. These components include BrowserRouter, Route, Switch, Link, NavLink, Redirect, and others.

With React Router DOM, developers can define routes for different URLs and map them to specific components in their applications.

This allows for seamless navigation between different views or pages in a single-page application without triggering a full page reload.

While it also provides features like nested routes, route parameters, query parameters, route guarding, and history management, which make it a powerful tool for building complex web applications with React.

You need to install React Router DOM in your working environment before you could start using it by pasting the command below in the terminal:

npm install react-router-dom

Have an example of How to use React Router DOM

// Import necessary modules
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

// Define components for different views
const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;
const Contact = () => <h1>Contact</h1>;

// Main App component
const App = () => {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </Router>
  );
};

export default App;

In the above example, we first import the necessary modules from react-router-dom, including BrowserRouter for wrapping our components with a Router, Route for defining routes, Switch for handling route matching, and Link for creating links to different views.

Next, we define three components for the different views of our application: Home, About, and Contact. These components simply render some text to represent the content of each view.

Then, we define our main App component, which is wrapped in the BrowserRouter component. Inside the App component, we have a navigation bar with links to different views (Home, About, and Contact) using the Link component. The Route components define the routes for each view and map them to the corresponding component to be rendered.

The Switch component is used to wrap the Route components, and it ensures that only one Route component matching the current URL is rendered at a time. The “exact” prop is used with the Route for the home route (“/”) to ensure an exact match.

React Router DOM v6

react router DOM

In React Router DOM v6, the BrowserRouter component is replaced with the Router component, and the Route components are used to define routes and map them to the corresponding components to be rendered. The Outlet component is used to render the matched child route components within the parent route component.

Nested routes can be defined using the nested Route components as shown in the example. The “index” prop is used to specify the component to be rendered when the parent route matches exactly, similar to the “exact” prop in previous versions.

The Link component is used to create links to different views, similar to previous versions. However, the “to” prop is now used instead of the “path” prop for defining the target URL.

React Router DOM v6 install

To install React Router DOM version 6 in a React project, you can use a package manager such as npm or yarn. Here are the steps to install React Router DOM v6 using npm:

Step 1: Create a new React project (if you haven’t already) using a tool like Create React App or your preferred setup.

Step 2: Open a terminal and navigate to the root directory of your React project.

Step 3: Run the following command to install React Router DOM v6:

npm install react-router-dom@next

Note: The “@next” tag indicates that you want to install the next major version (v6) of React Router DOM.

Step 4: After the installation is complete, you can now import and use React Router DOM v6 in your React application.

Below is an example of how you can work with React Router DOM v6:

// Import necessary modules
import React from 'react';
import { Router, Route, Link, Outlet, BrowserRouter } from 'react-router-dom';

// Define components for different views
const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;
const Contact = () => <h1>Contact</h1>;

// Main App component
const App = () => {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>
      <Outlet />
    </Router>
  );
};

// Nested routes
const NestedRoutes = () => {
  return (
    <div>
      <Route index element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/contact" element={<Contact />} />
    </div>
  );
};

export default function Main() {
  return (
    <BrowserRouter>
      <Route path="/" element={<App />}>
        <Route index element={<Home />} />
        <Route path="/" element={<NestedRoutes />}>
          {/* Nested Routes */}
        </Route>
      </Route>
    </BrowserRouter>
  );
}

Overall, React Router DOM v6 introduces some changes in syntax and usage compared to previous versions, but it still provides powerful routing capabilities for building SPAs with React.

Related posts

JavaScript Confirm() Method
Underscore Js Library
For Each Method Javascript
JavaScript Array slice()
setTimeout Javascript