【八股系列】react-router里的Link标签和a标签有什么区别？

1.功能：

• Link：在单页应用程序（SPA）中提供导航，而不会导致页面重新加载。当用户点击链接时，React会阻止浏览器默认的页面刷新行为，并且使用 react-router 提供的导航方式，只更新 URL 并渲染对应的组件，从而实现单页面应用（SPA）的效果。。
• a：单击时会导致完整页面重新加载，导航到新 URL。

2.性能：

• Link：由于不会导致页面重新加载，因此它提供更好的用户体验，特别是在 SPA 中。它提高了性能，因为避免了不必要的网络请求。
• a：完整页面重新加载会导致较慢的用户体验，因为需要从服务器获取新页面。

3.无障碍：

• Link：提供更好的无障碍性，因为它可以通过键盘聚焦和激活。
• a：可能不那么无障碍，因为它不提供与按钮或其他交互式元素相同的键盘导航和焦点行为。

link使用示例：

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;