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.
