SPA 中的按钮与链接，例如 React

Question

Which one should I use inside a SPA application?? Considering the user Experience.

I have designed my applications using React with some personal rules, but which one would be the right way to use?

Buttons:

• For small actions (close a tooltip, a notification badge...)
• With forms
• When you don't need to worry with event flows

Links

• To change a route / page
• Anchor links
• Link inside texts

Like I said, getting confuse here to distinguish the use and purpose of each one.

Answer 1

Generally, my distinguishing factor is that Buttons execute an action whereas Links navigate you to a different portion of a website, generally undoable with the back button.

Some common Buttons:

• Save Button (on a form)
• Post Your Answer (stack overflow question answer)
• Log In
• Send Email

Some Common Links:

• Home, Profile (facebook)
• Questions (stack overflow)
• Notifications (twitter)
• Popular (reddit)

As a metric for which to use, I usually like to ask if the thing I'm doing would be able to be undone with the back button on the browser. You can't "back button" a login request, or a tweet, but you can "back button" navigation to your profile on facebook or a link on reddit.