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