Introduction to React JS Router DOM

Last Updated: 18th October, 2023

React Router DOM is a popular library for routing in React applications. It allows developers to create dynamic and multi-page applications by mapping URLs to specific components. With React Router DOM, developers can create complex routing configurations that make it easy for users to navigate their applications.

Setting up React Router DOM can seem daunting at first, but it is relatively straightforward. In this topic, we will provide an overview of React Router DOM and guide you through the steps to set up routing in your React application. We'll cover the basics of how to install and configure React Router DOM, as well as how to use it to create routes, render components, and handle navigation. Whether you're a seasoned React developer or just getting started, this topic will help you get up and running with React Router DOM.

Understanding React Router DOM

React Router DOM is important for several reasons. Firstly, it provides a way to handle routing in single-page applications, making it easy for users to navigate between different pages or views within the same application without having to wait for the server to load a new page. This can result in a faster, more seamless user experience. Secondly, React Router DOM allows for more complex routing configurations, such as nested routes and route parameters. This makes it easier to build applications with multiple levels of navigation and dynamic content. Finally, React Router DOM integrates well with other React libraries and frameworks, making it a popular choice for building modern web applications.

React Router DOM is a subset of React Router, which is a routing library for React applications. React Router provides a more generic routing solution, while React Router DOM specifically focuses on routing for web applications using the DOM (Document Object Model). React Router also supports routing for other platforms, such as React Native, while React Router DOM is designed specifically for web-based applications.

Some key features of React Router DOM include:

1. Declarative routing: React Router DOM uses a declarative approach to define routes and components, making it easier to manage and update routing configurations.
2. Nested routes: React Router DOM allows for nested routes, making it easier to build complex applications with multiple levels of navigation.
3. Route parameters: React Router DOM supports dynamic route parameters, making it easy to create dynamic, data-driven views within an application.
4. Redirects: React Router DOM includes built-in support for redirects, making it easy to redirect users to different views or pages based on certain conditions.
5. History management: React Router DOM includes built-in support for managing browser history, making it easy to handle browser back and forward buttons, as well as URL changes.

Setting up React Router DOM

React Router DOM is a package that provides client-side routing functionality for React applications. To install React Router DOM, you can use the npm package manager by running the following command in your project directory:

npm install react-router-dom

After installing React Router DOM, you can import it into your React application using the **import** statement. Here is an example of how to import **BrowserRouter**and **Route**components from React Router DOM:

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

To set up the basic structure of your React application with React Router DOM, you will need to wrap your application with the **BrowserRouter**component and define your application routes using the **Route**component. Here is an example of how to set up the basic structure of your application:

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

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

In this example, the **BrowserRouter**component is wrapping the application, and three routes are defined using the **Route**component. The **exact** prop is used to match the exact path of the route, and the **component** prop is used to specify the component to render for that route.

Creating Routes

The **Route** component is used to define a route in your application. It has several props that you can use to customize the behavior of the route, such as **path**to specify the URL path to match **exact** to match the exact path only and **component** to specify the component to render when the route is matched.

Creating basic routes with Route component:

To create a basic route with React Router DOM, you can use the **Route** component and define the **path** and **component** props. Here is an example of how to create a route for a home page:

import { Route } from 'react-router-dom';

function App() {
  return (
    <div>
      <Route path="/" component={HomePage} />
    </div>
  );
}

In this example, the **Route**the component is used to match the URL path **'/'**and render the **HomePage**component when the route is matched.

Creating dynamic routes with Route components:

You can create dynamic routes in React Router DOM by using the **:** syntax to specify a parameter in the URL path. Here is an example of how to create a dynamic route that accepts an **id** parameter:

import { Route } from 'react-router-dom';

function App() {
  return (
    <div>
      <Route path="/users/:id" component={UserPage} />
    </div>
  );
}

In this example, the **Route**component is used to match a URL path that starts with **'/users/'**

and followed by an **id**parameter. The **UserPage**component will be rendered with the **id** parameter as a prop.

Creating routes with parameterized URLs:

You can create routes with parameterized URL by using the **match**prop provided by the **Route** component. Here is an example of how to create a route with a parameterized URL:

import { Route } from 'react-router-dom';

function App() {
  return (
    <div>
      <Route path="/users/:id" render={({match}) => (
        <UserPage userId={match.params.id} />
      )} />
    </div>
  );
}

In this example, the **Route**component uses the **render** prop to pass the **match** object as a prop to the **UserPage**component. The **userId**prop is then set to the **id** parameter in the URL path.

Navigating Between Routes

Link components and props:

In React, the Link component is used to create links between different pages or components in a single-page application. It can be imported from the react-router-dom library. The Link component accepts several props that can be used to customize its behavior:

1. to: Specifies the path or location to which the link should navigate. This can be a string or an object that contains a pathname property.
2. target: Specifies where to open the linked document. By default, links are opened in the same tab or window. If you set target="_blank", the link will be opened in a new tab.
3. rel: Specifies the relationship between the current document and the linked document. For example, you can use rel="noopener noreferrer" to prevent security risks when opening links in a new tab.
4. aria-label: Specifies a label for the link that can be used by assistive technology to describe the link's purpose.

Here's an example of how to use the Link component:

import { Link } from 'react-router-dom';

function HomePage() {
  return (
    <div>
      <h1>Welcome to my website!</h1>
      <Link to="/about">Learn more about me</Link>
    </div>
  );
}

Navigating with the Link component:

To navigate between pages or components using the Link component, simply set the "to" prop to the path or location you want to navigate to. When the link is clicked, the React Router will update the URL and render the appropriate component.

Here's an example of how to use the Link component to navigate to a different page:

import { Link } from 'react-router-dom';

function HomePage() {
  return (
    <div>
      <h1>Welcome to my website!</h1>
      <Link to="/about">Learn more about me</Link>
    </div>
  );
}

function AboutPage() {
  return (
    <div>
      <h1>About Me</h1>
      <p>I am a software developer.</p>
    </div>
  );
}

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route path="/about" component={AboutPage} />
      </Switch>
    </Router>
  );
}

Navigating programmatically with the useHistory hook:

Sometimes you may need to navigate programmatically in response to a user action or some other event. The useHistory hook from the react-router-dom library can be used to achieve this. The useHistory hook provides access to the history object, which allows you to manipulate the browser history.

Here's an example of how to use the useHistory hook to navigate programmatically:

import { useHistory } from 'react-router-dom';

function HomePage() {
  const history = useHistory();

  function handleClick() {
    history.push('/about');
  }

  return (
    <div>
      <h1>Welcome to my website!</h1>
      <button onClick={handleClick}>Learn more about me</button>
    </div>
  );
}

function AboutPage() {
  return (
    <div>
      <h1>About Me</h1>
      <p>I am a software developer.</p>
    </div>
  );
}

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route path="/about" component={AboutPage} />
      </Switch>
    </Router>
  );
}

Creating Nested Routes

In a React application with multiple pages, nested routes allow us to define sub-routes for a particular page or component. This means that when the user navigates to a particular page, they can access additional routes that are specific to that page. Nested routes are often used to organize large applications into smaller, more manageable pieces.

Creating nested routes with Route component:

The Route component is used to define the mapping between the URL path and the component that should be rendered. To create nested routes, we can use the Route component inside another Route component. The path of the nested Route component will be relative to the path of its parent component.

Here's an example of how to create nested routes with the Route component:

import { Route } from 'react-router-dom';

function App() {
  return (
    <div>
      <h1>Welcome to my website!</h1>
      <Route exact path="/" component={HomePage} />
      <Route path="/users" component={UsersPage} />
      <Route path="/users/:userId" component={UserProfilePage} />
    </div>
  );
}

function UsersPage() {
  return (
    <div>
      <h2>Users</h2>
      <Route exact path="/users" component={UserList} />
      <Route path="/users/:userId" component={UserProfilePreview} />
    </div>
  );
}

In this example, we define the routes for the entire application in the App component. The UsersPage component contains its own routes, which are relative to the "/users" path. The UserList component will be rendered when the user navigates to "/users", and the UserProfilePreview component will be rendered when the user navigates to "/users/:userId", where ":userId" is a parameter that will be passed to the component.

Creating nested routes with Switch component:

The Switch component is used to render only the first matching route. This means that if a route matches, the Switch component will stop looking for other matches and render the component associated with the matching route. We can use the Switch component to create nested routes by nesting Route components inside the Switch component.

Here's an example of how to create nested routes with the Switch component:

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

function App() {
  return (
    <div>
      <h1>Welcome to my website!</h1>
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route path="/users" component={UsersPage} />
      </Switch>
    </div>
  );
}

function UsersPage() {
  return (
    <div>
      <h2>Users</h2>
      <Switch>
        <Route exact path="/users" component={UserList} />
        <Route path="/users/:userId" component={UserProfilePreview} />
      </Switch>
    </div>
  );
}

In this example, we use the Switch component to create nested routes in the UsersPage component. The UserList component will be rendered when the user navigates to "/users", and the UserProfilePreview component will be rendered when the user navigates to "/users/:userId", but only one of these routes will be matched and rendered at a time, based on the URL path.

Conclusion

In conclusion, React Router DOM is a powerful library for routing in React applications. With its declarative routing, support for nested routes, dynamic route parameters, and built-in support for redirects and history management, developers can create complex routing configurations that make it easy for users to navigate their applications. Setting up React Router DOM is relatively straightforward, requiring only the installation of the package and the definition of routes using the BrowserRouter and Route components. React Router DOM is a popular choice for building modern web applications, and its integration with other React libraries and frameworks makes it a versatile tool for developers. Whether you're a seasoned React developer or just getting started, React Router DOM is an essential tool for building dynamic and multi-page applications.