Usually my rule of thumb was that links are for navigating and buttons for actions (form controls).

For example, if I were to need an action that opens up a modal, I would use a button.

But with React Router adding Nested Routes, this phylosophy falls a bit short since now a button that opens up a modal could also be changing the current route (e. g. going from /profile to /profile/edit).

Following the previous example, when the user clicks the button, the modal opens up and the route on the address bar changes. Since the current route changed, normally I would use a link but since it's an action also (opening up a modal) , it should be a button.

I wonder if there is any concensus around this scenario.

There are questions and answers on the differences between buttons and links and when to use each one but none of them in the context of nested routes.

  • 2
    Does this answer your question? What are the differences between buttons and links?
    – Nash
    Jun 7 at 6:09
  • @Nash thanks! But it doesn't cover the case of nested routes as presented by React Router.
    – Camilo
    Jun 7 at 14:52
  • Technical questions related to specific frameworks might receive more helpful responses in StackOverflow.
    – Izquierdo
    Jun 7 at 17:15
  • @Izquierdo is not strictly technical, it's a new feature that opens up new UX possibilities that were not available before.
    – Camilo
    Jun 7 at 17:43


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.