什么是客户端路由以及如何使用它？

Question

如果有人能回答以下问题，我会很高兴

1. 它是如何工作的？
2. 为什么有必要？
3. 它有什么改进？

Answer 1

我知道已经晚了，但我有一些关于客户端路由 (CSR) 工作原理的信息。这个答案并不试图提供客户端路由的完整 js 实现，而是试图阐明哪些概念将帮助您实现自己的一个。确实，当用户单击锚标记时，浏览器会向服务器发送请求。但是我们将能够拦截事件并阻止它的默认行为，即使用“event.preventDefault();”向服务器发送请求。下面是来自 React 路由器网页的 sn-p。

<a
  href="/contact"
  onClick={event => {
    // stop the browser from changing the URL and requesting the new document
    event.preventDefault();
    // push an entry into the browser history stack and change the URL
    window.history.pushState({}, undefined, "/contact");
  }}
/>

同时聆听前进/后退按钮的点击也很重要。这可以通过，

window.addEventListener("popstate", () => {
  // URL changed!
});

但是看看上面的两个 sn-ps，你可以想象 CSR 是如何实现的。还有更多。这就是为什么存在像 React Router 这样的库，而像 Angular 这样的 Web 框架默认提供 CSR 的原因。

如果您想了解更多信息，请访问下面的链接，它将进入您的 react router 概念页面。

https://reactrouter.com/docs/en/v6/getting-started/concepts

此外，如果您想更深入地了解该主题，可以查看 Angular 路由器的代码。比较这两种实现将提供更深入的了解。

Answer 2

我试图构建一个单页应用程序并开始了解客户端路由。

通过实现客户端路由，我能够实现以下目标

1. 浏览器中的前后按钮开始为我的单页 JavaScript 应用程序工作。这在从移动浏览器访问页面时非常重要。
2. 用户能够收藏/分享以前无法实现的 URL。

Answer 3

客户端路由与服务器端路由相同，但它是在浏览器中运行的。

在典型的 Web 应用程序中，您有多个页面映射到不同的 URL，每个页面都有一些逻辑和模板，然后呈现。

客户端路由只是在浏览器中运行这个过程，使用 JavaScript 作为逻辑和一些基于 JS 的模板引擎或其他类似的方法来呈现页面。

通常用于单页应用程序，其中服务器端代码主要用于提供客户端代码通过 Ajax 使用的 RESTful API。