Introduction to React Router for Navigation

React Router is a powerful library that enables navigation within a React application. It provides a declarative way to define routes and render different components based on the URL. In this article, we will explore the basics of React Router and learn how to use it for navigation in our ReactJS applications.

Installation

To get started with React Router, we first need to install it in our project. Open your terminal and run the following command:

npm install react-router-dom

This will install the React Router DOM package, which is the version of React Router that is specifically designed for web applications.

Setting up Routes

Once the installation is complete, we can start setting up our routes. In your main application file, import the necessary components from React Router:

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

The Router component acts as a wrapper for our application, and the Route component represents an individual route. The Switch component ensures that only one route is rendered at a time.

Inside the Router component, define your routes using the Route component:

<Router>
  <Switch>
    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
    <Route path="/contact" component={Contact} />
    <Route component={NotFound} />
  </Switch>
</Router>

In this example, we have defined four routes. The exact attribute is used on the root route to ensure that it matches only the exact URL. The component attribute specifies the component to be rendered when the route is matched.

Navigating between Routes

To enable navigation between routes, we can use the Link component provided by React Router. Replace any anchor tags (<a>) in your application with Link components:

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

function Navigation() {
  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>
  );
}

The to attribute in the Link component specifies the URL to navigate to when the link is clicked.

Accessing Route Parameters

Sometimes, we may need to pass parameters to our routes. React Router provides a way to access these parameters using the useParams hook. First, import the hook into your component:

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

Then, use it inside your component to access the parameter:

function UserPage() {
  const { userId } = useParams();
  return <p>User Id: {userId}</p>;
}

In this example, if we navigate to a URL like /users/123, the value 123 will be extracted and assigned to the userId variable.

Conclusion

React Router is a powerful and flexible library that provides routing capabilities to React applications. In this article, we have learned the basics of setting up routes, navigating between them using Link components, and accessing route parameters using the useParams hook. With React Router, you can easily create complex navigation structures and enhance the user experience of your ReactJS application.