前端React篇之React-Router的实现原理是什么？React-Router的路由有几种模式？

目录

• React-Router的实现原理是什么？
• React-Router的路由有几种模式？
• • HashRouter
  • BrowserRouter

React-Router的实现原理是什么？

1. 基于hash的路由：通过监听浏览器的hashchange事件来感知URL中hash部分的变化。当hash发生变化时，React Router能够根据新的hash值来匹配对应的路由并展示相应的组件。可以直接改变hash值来触发路由变化。

2. 基于HTML5 History API的路由：通过history.pushState和history.replaceState等方法来改变URL，这样可以在不刷新页面的情况下改变浏览器地址栏的URL。React Router利用这个API来实现页面的路由切换，同时通过监听popstate事件来感知URL的变化并做出相应的路由处理。

React Router利用这两种客户端路由实现思想，结合history库来管理路由状态和历史记录。它维护了一个路由配置表，当URL发生变化时，React Router会根据当前URL匹配对应的路由规则，找到要展示的组件并进行渲染。通过这种方式，React Router实现了前端路由管理，使得单页应用能够实现页面间的无刷新跳转和状态管理。

React-Router的路由有几种模式？

React-Router提供了两种主要的路由模式：HashRouter和BrowserRouter。

1. HashRouter：

   • 使用URL的哈希部分（#）来进行路由，不会导致页面的完全重新加载。
   • URL中的哈希部分后面的内容被认为是路由路径的一部分。
   • 可以通过JavaScript捕获哈希变化事件，实现单页应用的路由切换。
   • 可以设置不同的hashType，如slash、noslash和hashbang，来定义哈希部分的格式。

2. BrowserRouter：

   • 使用HTML5 History API来进行路由，通过history.pushState和history.replaceState改变URL，监听popstate事件感知URL的变化。
   • URL中的路径部分用于路由匹配，更加自然地表示URL路径，但需要服务器端的配置支持。
   • 可以设置basename来定义所有路由的基准URL。
   • 可以通过getUserConfirmation属性设置确认导航的函数，配合Prompt组件使用。

另外，还有MemoryRouter模式，将路由信息保存在内存中，适用于一些特殊场景，如非浏览器环境下的单元测试或服务端渲染。

根据具体需求和应用场景，可以选择合适的路由模式来实现React应用的路由管理。BrowserRouter使用HTML5 History API，更加自然，但需要服务器端支持；HashRouter使用URL的哈希部分，不会导致页面重新加载，适用于简单的单页应用。

这些不同的路由模式可以根据具体的需求和应用场景进行选择和配置。

HashRouter

HashRouter 是 React Router 中用于处理路由的一种方式。它使用 URL 中的哈希部分来作为路由地址（即 # 后面的部分）来控制页面的跳转。通常用于不支持 HTML5 History API 的环境，比如旧版浏览器或者一些特殊的 Webview 环境。

HashRouter 是 React Router 中用于通过 URL 的 hash 部分来控制路由跳转的组件。它的主要参数包括：

• basename: 与 BrowserRouter 的功能相同，用于为所有位置设置基准 URL。
• getUserConfirmation: 与 BrowserRouter 功能一样，用于在导航时进行确认提示。
• hashType: 用于指定 window.location.hash 使用的类型，可以是以下几种：
  • slash: 在 hash 后面跟一个斜杠，例如 #/ 和 #/sunshine/lollipops。
  • noslash: 在 hash 后面没有斜杠，例如 # 和 #sunshine/lollipops。
  • hashbang: 使用 Google 风格的 ajax 可抓取 URL，例如 #!/ 和 #!/sunshine/lollipops。

这些参数允许你配置 HashRouter 来适应不同的 URL 结构和需求。

HashRouter 就像是一个导航标签，可以帮助你在单页面应用中切换不同的内容页面。它通过 URL 中的哈希部分来识别不同的页面内容，并在用户点击链接或进行其他操作时，帮助程序知道要显示哪个页面。想象你在网站上点击了一个链接，然后页面的内容就会发生变化，就像翻书一样。HashRouter 就是帮助你在网页应用中实现这个链接点击后页面变化的功能。

假设我们有一个简单的网站，里面有首页、产品页面和联系页面。我们希望能够通过点击导航栏上的链接来在这些页面之间进行切换。

import React from 'react';
import { HashRouter, Route, Link } from "react-router-dom";

function Home() {
  return <h2>首页</h2>;
}

function Products() {
  return <h2>产品</h2>;
}

function Contact() {
  return <h2>联系我们</h2>;
}

function App() {
  return (
    <HashRouter>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">首页</Link>
            </li>
            <li>
              <Link to="/products">产品</Link>
            </li>
            <li>
              <Link to="/contact">联系我们</Link>
            </li>
          </ul>
        </nav>

        <Route path="/" exact component={Home} />
        <Route path="/products" component={Products} />
        <Route path="/contact" component={Contact} />
      </div>
    </HashRouter>
  );
}

export default App;

1. 引入 HashRouter、Route 和 Link 组件。
2. 创建几个简单的页面组件：Home、Products 和 Contact。
3. 在 App 组件中，使用 HashRouter 包裹整个应用，并设置导航链接以及对应的路由规则。

注意的：

• 当使用 HashRouter 时，URL 中会出现 #/ 这样的格式，这是正常的，不用担心。
• 如果你的应用需要更加友好的 URL 格式，并且目标环境支持 HTML5 History API，考虑使用 BrowserRouter。

HashRouter 是一种处理路由的方式，它通过 URL 的哈希部分来控制页面的跳转。适合简单的单页面应用，并且易于上手。

BrowserRouter

BrowserRouter 是 React Router 中用于控制路由跳转的组件，它使用 HTML5 提供的 history API 来保持页面 UI 和 URL 的同步。

BrowserRouter 是 React Router 中使用 HTML5 提供的 history API 来控制路由跳转的组件。它的主要属性包括：

• basename: 用于设置所有路由的基准 URL。正确格式是前面有一个前导斜杠，但不能有尾部斜杠。比如 将使得 等同于
  。
• forceRefresh: 如果为 true，在导航的过程中整个页面将会刷新。一般情况下，只有在不支持 HTML5 history API 的浏览器中使用此功能。
• getUserConfirmation: 用于确认导航的函数，默认使用 window.confirm。可以自定义确认函数，配合 组件一起使用。
• keyLength: 用来设置 Location.Key 的长度。

这些属性允许你配置 BrowserRouter 来适应不同的 URL 结构和需求，以及在导航时进行确认提示等操作。

想象你在网站上点击了一个链接，然后页面的内容就会发生变化，但 URL 并不会完全刷新。这种体验就是 BrowserRouter 提供的功能。

假设我们有一个简单的网站，里面有首页、产品页面和联系页面。我们希望能够通过点击导航栏上的链接来在这些页面之间进行切换，而且在切换页面时 URL 也会相应地发生改变。

import React from 'react';
import { BrowserRouter, Route, Link } from "react-router-dom";

function Home() {
  return <h2>首页</h2>;
}

function Products() {
  return <h2>产品</h2>;
}

function Contact() {
  return <h2>联系我们</h2>;
}

function App() {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">首页</Link>
            </li>
            <li>
              <Link to="/products">产品</Link>
            </li>
            <li>
              <Link to="/contact">联系我们</Link>
            </li>
          </ul>
        </nav>

        <Route path="/" exact component={Home} />
        <Route path="/products" component={Products} />
        <Route path="/contact" component={Contact} />
      </div>
    </BrowserRouter>
  );
}

export default App;

1. 引入 BrowserRouter、Route 和 Link 组件。
2. 创建几个简单的页面组件：Home、Products 和 Contact。
3. 在 App 组件中，使用 BrowserRouter 包裹整个应用，并设置导航链接以及对应的路由规则。

注意的：

• 当使用 BrowserRouter 时，URL 不会出现 #，而会更加友好和直观。
• 如果需要兼容一些不支持 HTML5 history API 的环境，可以考虑使用 HashRouter。

BrowserRouter 是一种处理路由的方式，它使用 HTML5 提供的 history API 来控制页面的跳转。适合大多数现代浏览器环境下的单页面应用，并提供更加友好的 URL 格式。

持续学习总结记录中，回顾一下上面的内容：
React Router 的实现原理：它通过监听 URL 的变化，然后渲染相应的组件，从而实现页面之间的切换和跳转。当用户点击链接或执行前进/后退操作时，React Router 感知到 URL 的变化，然后根据匹配的路由规则来决定渲染哪个组件，最终呈现给用户相应的页面内容。这种机制让我们能够创建单页面应用，并且在不同的 URL 地址下展示不同的内容，就好像是在多个页面间进行导航一样。
React Router 有两种主要的路由模式：HashRouter 和 BrowserRouter。HashRouter 使用 URL 中的哈希部分（#）来控制路由，适合不支持 HTML5 history API 的环境；而BrowserRouter 则使用 HTML5 提供的 history API 来控制路由，它提供了更加友好和直观的 URL 格式，适用于大多数现代浏览器环境下的单页面应用。