Working with Query Parameters in React Router

import {useLocation, useNavigate} from 'react-router-dom'

function Welcome() {
    const location = useLocation();
    const navigate = useNavigate();
    
    // URLSearchParams defines utility methods to work with the query string of a URL.
    const queryParams = new URLSearchParams(location.search);
    const paramName = queryParams.get("name");

    console.log(location);

    return (
        <div>
            <div>
                <button className={"btn mx-2"} onClick={event => {
                    navigate("/welcome");
                }}>Reset
                </button>

                <button className={"btn mx-2"} onClick={event => {
                    navigate("/welcome?name=Mahmood");
                }}>Mahmood
                </button>

                <button className={"btn mx-2"} onClick={event => {
                    navigate("/welcome?name=Nasim");
                }}>Nasim
                </button>
            </div>

            <div>Hello {paramName}</div>
        </div>
    );
}

export default Welcome;

References
https://reactrouter.com/docs/en/v6/getting-started/concepts#locations