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?

What happens in your browser when you click twice on the title of this page? I'd expect the same to happen with JS using the History API. — Sergiu Paraschiv
– Sergiu Paraschiv, Commented Aug 3, 2019 at 9:12
use this link to customize history:reacttraining.com/react-router/web/api/history — Alireza HI
– Alireza HI, Commented Aug 3, 2019 at 9:15
@SergiuParaschiv Exactly what my question is asking how to do? — sdfsdf
– sdfsdf, Commented Aug 3, 2019 at 10:45
No, you have two questions. I asked something about one of them, specifically "Is this a bad UX?". — Sergiu Paraschiv
– Sergiu Paraschiv, Commented Aug 3, 2019 at 12:53

John Matthew · Accepted Answer · 2019-08-03 11:44:57Z

4

<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

answered Aug 3, 2019 at 11:44

John Matthew

814 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How do you prevent consecutive URLs in React Router?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related