Navigation and URL parameters

Navigation and URL parameters are important aspects of building a robust and dynamic application using React Router. In this article, we will explore how to use navigation and URL parameters in your React application using React Router.

Installing React Router

Before we get started, we need to install React Router. You can install it using npm:

npm install react-router-dom

Setting Up Navigation

React Router provides several components that allow you to navigate between different views in your application. One of the most commonly used components is Link.

Link is used to create a hyperlink that navigates to a specific route in your application. Here is an example of how to use Link to create navigation links:

jsx

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

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

function About() {
  return <h1>About Us</h1>;
}

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
}

export default App;

In this example, we have used Link to create two navigation links: one for the Home page and one for the About page. When a user clicks on a link, React Router will navigate to the specified route and render the corresponding component.

URL Parameters

URL parameters allow you to pass dynamic data as part of the URL. React Router provides the Route component to handle URL parameters.

Here’s an example of how to use URL parameters:

jsx

import React from 'react';
import { BrowserRouter as Router, Link, Route, useParams } from 'react-router-dom';

function User() {
  let { id } = useParams();
  return <h1>User ID: {id}</h1>;
}

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/users/1">User 1</Link>
            </li>
            <li>
              <Link to="/users/2">User 2</Link>
            </li>
          </ul>
        </nav>

        <Route path="/users/:id" component={User} />
      </div>
    </Router>
  );
}

export default App;

In this example, we have created a User component that takes a id parameter as part of the URL. We have used useParams hook to extract the id parameter from the URL and rendered it in the component.

We have also used the path prop on the Route component to specify the URL pattern for the User component. The :id syntax in the URL pattern specifies that the id parameter is part of the URL.

Conclusion

Navigation and URL parameters are essential features of React Router. They allow you to create a dynamic and robust application by allowing users to navigate between different views and pass dynamic data as part of the URL. By understanding how to use React Router, you can create a powerful and flexible application with React.