URL Parameters with React Router v6

In this article, we’ll show you how to set URL parameters with React Router v6. In the previous article, we have explained how to add URL parameters in React Router version 5.

Here, we’ll create an example using React Hooks.

Checkout more articles on ReactJS

Demo Application

Output - URL Parameters with React Router v6 - Clue Mediator

Steps to add URL Parameters with React Router v6

1. Project structure
2. Setup the React project
3. Add dependencies
4. Add URL parameters
5. Add support for Optional parameters
6. Implement a Not Found (404) Route
7. Output

1. Project structure

In this example, we’ll refer the following project structure for parameters routing using React Router version6.

• url-params-react-router-v6

  • node_modules

  • public

    • index.html

  • src

    • About.js
    • App.js
    • Contact.js
    • Home.js
    • index.css
    • index.js
    • NotFound.js

  • package-lock.json

  • package.json

  • README.md

2. Setup the React project

To setup the React project, use the `create-react-app` NPM package. Run the following command.

npx create-react-app url-params-react-router-v6

3. Add dependencies

Now, we’ll install the `react-router-dom` by running the following command.

npm i react-router-dom

Once the package has been installed, you can see the following versions of `react` and `react-router-dom` by looking at the dependencies versions in the `package.json` file.

react

^18.2.0

react-router-dom

^6.3.0

4. Add URL parameters

Your routes may be defined as shown below to add the URL parameters.

<browserrouter>
    <routes>
      // ...
      <route path="about/:id" element="{<About">} />
    </route></routes>
</browserrouter>

We have to use the `useParams` hook to access the URL parameter in the component.

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

// ...
// ...

const { id } = useParams();

5. Add support for Optional parameters

We need to define the routes as shown below in order to provide optional parameters.

<route path="about">
  <route index="" element="{<About">} />
  <route path=":id" element="{<About">} />
</route>
</route></route>

6. Implement a Not Found (404) Route

We must specify the route path as a `*` as follows in order to add a not found route.

<route path="*" element="{<NotFound">} />
</route>

7. Output

Let's put everything in place and check out the result.

App.js

import React from 'react';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';
import NotFound from './NotFound';

function App() {
  return (
    <browserrouter>
      <div>
        <h3>URL Parameters with React Router v6 - <a href="https://cluemediator.com" target="_blank" rel="noopener">Clue Mediator</a></h3>
        <ul>
          <li><link to="/">Home</li>
          <li><link to="/about">About</li>
          <li><link to="/about/1">About 1</li>
          <li><link to="/about/2">About 2</li>
          <li><link to="/contact">Contact</li>
        </ul>
        <routes>
          <route path="*" element="{<NotFound">} />
          <route path="/" element="{<Home">} />
          <route path="about">
            <route index="" element="{<About">} />
            <route path=":id" element="{<About">} />
          </route>
          <route path="contact" element="{<Contact">} />
        </route></route></route></route></route></routes>
      </div>
    </browserrouter>
  );
}

export default App;

Home.js

import React from 'react';

const Home = () => {
  return <div>
    <h4>Home</h4>
    <p>This is Home page.</p>
  </div>
}

export default Home;

Contact.js

import React from 'react';

const Contact = () => {
  return <div>
    <h4>Contact</h4>
    <p>This is Contact page.</p>
  </div>
}

export default Contact;

About.js

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

const About = () => {
  const { id } = useParams();
  return <div>
    <h4>About</h4>
    <p>This is About page.</p>
    {id ? <b>ID: {id}</b> : <i>ID is optional.</i>}
  </div>
}

export default About;

NotFound.js

import React from 'react';

const NotFound = () => {
  return <div>
    <h2 0="" style={{ marginbottom: }}>404</h2>
    <h4 0="" style={{ margintop: }}>Page Not Found!</h4>
  </div>
}

export default NotFound;

I hope you find this article helpful.
Thank you for reading. Happy Coding..!!

Demo & Source Code

GitHub Repository StackBlitz Project