[React] 在 react 项目开发过程中， 是否可以不用 react-router， 使用浏览器原生 history 路由来组织页面路由？【热度: 632】

web框架web应用场景TOP100互联网

关键词：react router 路由、浏览器原生路由能力

作者备注
此问题实际上是在问：原生 路由 history api 和 react-router 的差距是啥， 或者说 react-router 做了啥

在 React 项目中，你完全可以不使用 react-router 而是使用浏览器原生的 history API 来手动管理路由。这通常会涉及以下几个步骤：

  1. 使用 history.pushState() 和 history.replaceState() 方法来添加和修改浏览器历史条目。
  2. 侦听 popstate 事件来响应浏览器历史的变化。
  3. 根据当前的 URL 状态，手动渲染对应的 React 组件。

例如，下面是一个简单的例子，演示了如何在没有 react-router 的情况下使用原生 history API 来管理路由。

class App extends React.Component {
  componentDidMount() {
    // 当用户点击后退/前进按钮时触发路由变化
    window.onpopstate = this.handlePopState;
    // 初始页面加载时处理路由
    this.route();
  }

  handlePopState = () => {
    // 处理路由变化
    this.route();
  };

  route() {
    const path = window.location.pathname;
    // 根据 path 渲染不同的组件
    switch (path) {
      case "/page1":
        // 渲染 Page1 组件
        break;
      case "/page2":
        // 渲染 Page2 组件
        break;
      // 其他路由分支...
      default:
        // 渲染默认组件或404页面
        break;
    }
  }

  navigate = (path) => {
    // 更新历史记录并触发路由变化
    window.history.pushState(null, "", path);
    this.route();
  };

  render() {
    return (
      <div>
        <button onClick={() => this.navigate("/page1")}>Go to Page 1</button>
        <button onClick={() => this.navigate("/page2")}>Go to Page 2</button>
        {/* 这里根据路由渲染对应的组件 */}
      </div>
    );
  }
}

// 实际的页面组件
const Page1 = () => <div>Page 1</div>;
const Page2 = () => <div>Page 2</div>;

尽管手动管理路由是可能的，但使用 react-router 这类专门设计的库通常会大大简化路由管理的工作。它为路径匹配、路由嵌套、重定向等提供了便利的抽象，并且和 React 的声明式方式很好地集成在一起。如果不是为了特别的原因，通常推荐使用现成的路由库来管理 React 应用的路由，以避免重新发明轮子。