What is the difference between Link tag and a tag in react-router

1. Function:

• Link: Provide navigation in a single page application (SPA) without causing the page to reload. When a user clicks on a link, React will block the browser's default page refresh behavior and usereact-routerThe navigation method provided is updated onlyURLAnd render the corresponding components to achieve the effect of single-page application (SPA). .
• a: When clicked, it causes the full page to reload, navigate to newURL。

2. Performance:

• Link: Since it does not cause the page to reload, it provides a better user experience, especially inSPAmiddle. It improves performance because unnecessary network requests are avoided.
• a: Full page reloading will result in a slower user experience because new pages need to be retrieved from the server.

3. Accessibility:

• Link: Provides better accessibility as it can be focused and activated via the keyboard.
• a: Possibly less accessible because it does not provide the same keyboard navigation and focus behavior as buttons or other interactive elements.

Using Link Tags

Attribute description

to
The path to jump to the link, such as /users/123.

query
An object that has been converted into a string's key-value pair.

hash
The hash value of the URL, such as #a-hash.

Note: React Router cannot currently manage the position of the scrollbar and will not automatically scroll to the corresponding element of hash. If you need to manage scrollbar positions, you can use the scroll-behavior library.

state
The state saved in location.

activeClassName
When a route is active, <Link> can receive incoming className. Inactive state, the default class is the default.

activeStyle
When a route is active, you can add styles to the link element.

onClick(e)
Customize the handling of click events. As with the <a> tag - call () to prevent excessive clicks, while () can prevent bubbling events.

other
You can also pass some props you want on the tag, such as title, id, className, etc.

Example of link usage:

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

const Home = () => <h2>Home</h2>;
const About = () => <h2>About</h2>;

const App = () => (
  <Router>
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about/">About</Link>
          </li>
        </ul>
      </nav>

      <Route path="/" exact component={Home} />
      <Route path="/about/" component={About} />
    </div>
  </Router>
);

export default App;

the difference

<Link> is a link that implements routing jump in react-router. Generally, when used with <Route>, react-router will take over Link's default link jump behavior. Unlike traditional page jumps, the "jump" behavior of <Link> will only trigger the corresponding page content update of the matching <Route> and will not refresh the entire page.
The <a> tag is a normal hyperlink, used to jump from the current page to another page pointed to by href (non-anchor point case).

Compared with <a>, the Link component avoids unnecessary re-rendering. react-router only updates the changed parts to reduce DOM performance consumption. The innovation of react is that it uses the concept of virtual DOM and diff algorithm to achieve "on-demand update" of the page. react-router inherits this very well.

Link did 3 things:

1. If the onClick method is defined on Link, execute the onclick method.
2. When clicking, block the default event of a tag (this way, click <a href="/abc">123</a> and the page will not be redirected or refreshed)
3. Get the jump href (that is to), and use history (one of the two methods of front-end routing, history & hash). At this time, the link has changed and the page has not been refreshed.

This is all about this article about the difference between Link tags and A tags in react-router. For more related react-router Link tags and a tags, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!