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
    Commented Jun 7, 2022 at 6:09
  • @Nash thanks! But it doesn't cover the case of nested routes as presented by React Router.
    – Camilo
    Commented Jun 7, 2022 at 14:52
  • Technical questions related to specific frameworks might receive more helpful responses in StackOverflow.
    – Izquierdo
    Commented Jun 7, 2022 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
    Commented Jun 7, 2022 at 17:43

1 Answer 1


As long as your path remains useful to the user, it doesn't matter. You can use either buttons or links for the navigation. In the case of an "edit profile" function, I'd expect a button, in the case of navigating between different pages of the settings, I'd expect a number of links in a menu (or maybe tabs).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.