How do you prevent consecutive URLs in React Router?

Question

Let's say you click something like <Link to="/">{...}</Link> twice. You will push the "/" pathname twice onto the history.location. How would you go about preventing the same pathname being pushed onto history.location two times in a row? Is this a bad UX?

Answer 1

<Link> tags in react-router-dom have a replace boolean parameter. You can check the current pathname if it matches with the incoming pathname.

<Link to="/" replace={location.pathname === "/"}>...</Link>

You can check it out https://reacttraining.com/react-router/web/api/Link/replace-bool