What is the concensus on links or buttons on the context of nested routes?

Question

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.

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).