Sometimes, we want to access a URL parameter with React Router v6.

In this article, we’ll look at how to access a URL parameter with React Router v6.

How to access a URL parameter with React Router v6?

To access a URL parameter with React Router v6, we can use the useParams hook.

For instance, we write

import React from "react";
import { Button } from "antd";
import { useParams } from "react-router-dom";

const DeleteUser = () => {
  const { id } = useParams();
  const handleDelete = async () => {
    // handle delete function
  };

  return <Button onClick={handleDelete}>Delete User</Button>;
};

export default DeleteUser;

to call useParams to return the value of the id URL parameter.

Then we can use that anywhere else in the DeleteUser component code.

Conclusion

To access a URL parameter with React Router v6, we can use the useParams hook.