A Guide to React Router DOM v6

What is React Router DOM?

React Router DOM is a vital JavaScript library for handling client-side routing in React applications. It is a part of the broader React Router library and provides a powerful and flexible way to manage navigation within a React application. In this article, we will explore the key features and usage of React Router DOM.

Why Use React Router DOM?

React Router DOM offers several advantages:

1. Single-Page Application (SPA) Support: It allows you to create SPAs by rendering different components based on the URL, giving the illusion of multiple pages within a single web page.

2. Organized Navigation: It helps in structuring your application by mapping URLs to specific components, making the codebase more organized and maintainable.

3. Dynamic Routes: You can define dynamic routes with parameters, enabling you to handle a wide range of user interactions.

4. Nested Routes: React Router DOM supports nesting routes within other routes, allowing you to create complex and hierarchical navigation structures.

Getting Started with React Router DOM

To begin, you need to install React Router DOM as a dependency in your React project. You can do this using npm or yarn:

npm install react-router-dom
# or
yarn add react-router-dom

Key Components of React Router DOM:

First import BrowserRouter, Routes, Route and Link from 'react-router-dom'.

In the following example, we've set up basic routes for the home, menu, and contact pages. When a user navigates to these routes, the respective components (Home, Menu, and Contact) are rendered in the application.

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

export default function App() {
  return (
   <div className="App">
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/menu" element={<Menu />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

• <BrowserRouter>: BrowserRouter component is the heart of React Router DOM. It is the parent component that stores all the other route components. Typically, it is placed at the root of your application.

• <Routes>: Routes is a new component introduced in v6 that replaces the switch component. (Switch renders a route exclusively as it displays the first child route that matches the current URL).

• <Route>: Route is the child component that renders a specific UI component when the URL matches the specified path. The path attribute specifies the path name we assign to the component and the element attribute refers to the component to render when the URL matches.

Linking Between Routes:

To navigate between different views, you can use the <Link> component provided by React Router DOM. It creates clickable links that change the URL and trigger the rendering of the corresponding component.

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

export default function App() {
  return (
   <div className="App">
     <BrowserRouter>
         <nav>
            <Link to="/">Home /</Link>
            <Link to="/menu">Menu /</Link>
            <Link to="/contact">Contact</Link>
         </nav>
         <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/menu" element={<Menu />} />
            <Route path="/contact" element={<Contact />} />
         </Routes>
     </BrowserRouter>
    </div>
  );
}

• <Link> The link component is used to create links to different routes and implement navigation around the application. It works like an HTML anchor tag.

Handling Not Found Pages:

There may be instances when users attempt to access a path that does not exist within the application. In such instances, you can set an asterisk (*) as the path to direct the user to the Not Found page. For convenience, you can even add a link to the Home page within the PageNotFound component.

  <Route path="*" element={<PageNotFound />} />

Nested Routes:

React Router DOM supports nested routes, which are essential for building complex applications with multiple levels of navigation. You can nest routes inside other routes, creating a hierarchical route structure.

     <Route path="/dashboard" element={<Dashboard/>}/>
         <Route path="profile" element={<Settings/>}/>
         <Route path="settings" element={<Profile/>}/>
      </Route>

Conclusion

React Router DOM is a fantastic tool for building dynamic and interactive single-page applications with React. It simplifies the process of managing routes, making it easier to create organized and responsive web applications. By using its components effectively, you can take full control of the navigation within your React projects.