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.