react-router 和原生路由有什么区别？

react-router 和原生路由（基于浏览器原生 API 的路由）在实现方式和功能上有显著的区别。以下是它们的主要区别：

1. 实现方式

• react-router
react-router 是一个基于 React 的第三方库，用于在单页应用（SPA）中实现客户端路由。它通过监听 URL 的变化，动态渲染不同的组件，而无需向服务器发送请求。

• 原生路由
  原生路由依赖于浏览器的原生 API（如 window.location 和 history），通过直接操作 window.location.href 或使用 history.pushState 来改变 URL。每次 URL 变化时，浏览器会向服务器发送请求，服务器返回新的页面。

2. 页面刷新

• react-router
  在单页应用中使用 react-router 时，URL 的变化不会导致页面刷新。只有组件的重新渲染会发生，用户体验更流畅。

• 原生路由
  原生路由的每次 URL 变化都会导致页面刷新，浏览器会向服务器请求新的页面，用户体验不如单页应用流畅。

3. 路由配置

• react-router
react-router 提供了声明式的路由配置方式，可以通过 <Route>、<Switch> 或 <Routes>（v6 版本）等组件定义路由规则。例如：

  import { BrowserRouter, Routes, Route } from 'react-router-dom';
  
  function App() {
    return (
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </BrowserRouter>
    );
  }
  

• 原生路由
  原生路由需要手动监听 URL 变化，并根据 URL 渲染不同的内容。例如：

  function renderPage() {
    const path = window.location.pathname;
    if (path === '/') {
      document.getElementById('root').innerHTML = '<h1>Home</h1>';
    } else if (path === '/about') {
      document.getElementById('root').innerHTML = '<h1>About</h1>';
    }
  }
  
  window.addEventListener('popstate', renderPage);
  document.addEventListener('DOMContentLoaded', renderPage);
  

4. URL 同步

• react-router
react-router 会自动同步 URL 和组件的渲染状态。URL 的变化会触发组件的重新渲染，而组件的状态变化也可以通过 useNavigate 或 history.push 反映到 URL 中。

• 原生路由
  原生路由需要手动同步 URL 和页面内容。例如，使用 history.pushState 改变 URL 后，需要手动更新页面内容。

5. 功能丰富性

• react-router
react-router 提供了丰富的功能，如嵌套路由、动态路由、路由守卫、懒加载等。它还支持多种路由模式（如 BrowserRouter、HashRouter、MemoryRouter）。

• 原生路由
  原生路由的功能相对简单，通常需要手动实现嵌套路由、动态路由等功能，开发复杂度较高。

6. 性能

• react-router
  在单页应用中，react-router 的性能较好，因为只有组件的重新渲染，而没有页面的完全刷新。

• 原生路由
  原生路由每次 URL 变化都会导致页面刷新，性能开销较大。

7. 适用场景

• react-router
  适用于单页应用（SPA），特别是需要复杂路由逻辑和动态内容加载的场景。

• 原生路由
  适用于多页应用（MPA），或者对单页应用没有需求的简单场景。

8. 示例对比

使用 react-router 实现路由

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

使用原生路由实现路由

function renderPage() {
  const path = window.location.pathname;
  const root = document.getElementById('root');
  if (path === '/') {
    root.innerHTML = '<h1>Home</h1>';
  } else if (path === '/about') {
    root.innerHTML = '<h1>About</h1>';
  }
}

window.addEventListener('popstate', renderPage);
document.addEventListener('DOMContentLoaded', renderPage);

// 手动导航
document.getElementById('about-link').addEventListener('click', (e) => {
  e.preventDefault();
  history.pushState({}, '', '/about');
  renderPage();
});

总结

如果你的项目是单页应用（SPA），推荐使用 react-router，因为它提供了更强大的功能和更好的开发体验。如果是多页应用（MPA），或者对单页应用没有需求，可以使用原生路由。