Basic React JS Router and Components

Last Updated: 18th October, 2023

Routing is an important part of developing modern web applications since it manages the navigation between different pages or components on a website. The routing method assists users in navigating through different portions of a website, ensuring that they have easy access to the information they require.

The React Router library is a common way to create routing capabilities in React. The React Router package includes various components that make defining and managing routes within a React application simple. In this chapter, we'll look at some of the key components given by React Router for constructing basic routing in a React project.

We will start by introducing the BrowserRouter component, which is the core component of the React Router library. We'll also look at the Link component, which lets us establish links between different pages or components in our application. In addition, we will go over the 'exact' element, which is used to ensure that the current URL's path exactly matches the path of the defined route. Finally, we'll look at how to use these components to construct navigation links, allowing users to travel between different regions of our program with ease.

You should have a basic grasp of how to construct routing capabilities in a React application using the BrowserRouter, Link components, the 'exact' attribute, and links for navigation by the end of this chapter. You will be able to design more dynamic and engaging web applications with this expertise.

BrowserRouter

The BrowserRouter Component:

The BrowserRouter is a high-level component provided by React Router that enables client-side routing in a React application. It uses HTML5 history API to keep track of the URL and render the appropriate components based on the current URL. The BrowserRouter component should wrap all the components that require routing within a React application.

Setting up BrowserRouter in a basic React application:

To set up BrowserRouter in a basic React application, you need to install the React Router package by running the following command in your terminal:

npm install react-router-dom

After installing the package, you need to import the BrowserRouter component from the react-router-dom package and wrap your App component with it. Here is an example of how to set up BrowserRouter in a basic React application:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

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

In the example above, we import the BrowserRouter component from the react-router-dom package and wrap the App component with it. The App component will now have access to routing functionality.

Defining routes using the Route component:

Once you have set up BrowserRouter in your application, you can define routes using the Route component provided by React Router. The Route component is used to match the current URL path with a component and render it. Here is an example of how to define routes using the Route component:

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

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

export default App;

In the example above, we import the Route and Switch components from the react-router-dom package and define three routes: one for the Home component, one for the About component, and one for the Contact component. The 'exact' attribute is used to match the root path exactly with the Home component. The Switch component ensures that only one route is rendered at a time.

Link Components

The Link Component:

The Link component is a fundamental component provided by React Router that allows you to create links for navigation within your React application. It's a special type of anchor tag that provides client-side routing functionality without reloading the page, making it ideal for creating single-page applications.

Using the Link Component for Navigation:

To use the Link component for navigation, you need to import it from the react-router-dom package and use it in your components. Here is an example of how to use the Link component to navigate between different pages or components in a single-page application:

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

function Navbar() {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/contact">Contact</Link>
        </li>
      </ul>
    </nav>
  );
}

export default Navbar;

In the example above, we import the Link component from the react-router-dom package and use it to create navigation links for our Navbar component. The 'to' prop is used to specify the target path of each link. When a user clicks on a link, the BrowserRouter component will update the URL and render the appropriate component based on the current URL.

The 'to' Prop:

The 'to' prop is a required prop for the Link component and is used to specify the target path of the link. It can be a string or an object that represents the target URL. Here are some examples of how to use the 'to' prop:

<Link to="/">Home</Link>
<Link to="/about">About</Link>
<Link to={{ pathname: '/contact', search: '?subject=feedback' }}>Contact Us</Link>

In the first two examples, the 'to' prop is a string that represents the target path of the link. In the third example, the 'to' prop is an object that contains both the pathname and search parameters. The search parameter is used to pass additional information to the target component, such as a query string.

'exact' attribute

The 'exact' attribute is a boolean prop that can be used with the Route and Link components in React Router. Its purpose is to prevent multiple routes from matching the same path.

When a Route component is defined without the 'exact' attribute, it will match any path that contains the specified path as a prefix. For example, if you define a route with a path of "/about", it will match any URL that starts with "/about", such as "/about-us" or "/about/team".

However, if you add the 'exact' attribute to the Route component, it will only match the exact path specified, preventing any other routes with a similar path from matching. For example, if you define a route with a path of "/about" and add the 'exact' attribute, it will only match the URL "/about" and not any other similar URLs.

Links for Navigation

Here's an example of how to use the Link component to create navigation menus and links that allow users to navigate to different pages or sections of a React application:

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

function Navbar() {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/contact">Contact</Link>
        </li>
      </ul>
    </nav>
  );
}

function Home() {
  return <h1>Welcome to the Home page!</h1>;
}

function About() {
  return <h1>Welcome to the About page!</h1>;
}

function Contact() {
  return <h1>Welcome to the Contact page!</h1>;
}

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

export default App;

In the preceding example, we defined a Navbar component that employs the Link component to generate navigation links. The BrowserRouter component will update the URL and render the appropriate component based on the current URL when a user clicks on a link.

In addition, three components have been defined: Home, About, and Contact, which correspond to the pathways indicated in the Navbar component. When the user navigates to the corresponding path, these components will be presented.

Finally, we've developed a main App component that includes the BrowserRouter component as well as a Switch component that will render the appropriate component based on the current URL.

Conclusion

Finally, routing is an important feature of developing modern web applications since it manages the navigation between different pages or components inside a website. The React Router package includes various components that make it simple to design and maintain routes within a React application. In this chapter, we looked at some of the fundamental React Router components for building basic routing in a React application, such as the BrowserRouter component, the Link component, the 'exact' attribute, and navigation links. Developers can use this knowledge to construct more dynamic and interactive web applications that give a consistent user experience. By using the BrowserRouter component, developers can set up client-side routing, and by using the Link component, they can create links for navigation within their React application. Overall, React Router provides a robust and flexible solution for implementing routing functionality in a React application.