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

Question

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

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

Answer 1

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

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

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

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

Answer 2

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

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

1. 浏览器中的前后按钮开始适用于我的单页 JavaScript 应用程序。这在从移动浏览器访问页面时非常重要。
2. 用户能够添加书签/共享以前不可能的 URL。

Answer 3

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

<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!
});

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

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

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

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