路由方案

目前了解的前端路由方案

• Next.js 动态路由 / 组件 实现客户端导航
• React-router 客户端路由
• DOM History API

Next.js 动态路由

• 静态生成页面并且页面路径由外部数据确定。
• getStaticPaths这个异步方法来获取 可能的路径取值。

方法：

1. 创建一个文件[pathname].js
2. 其内容包含一个渲染这个页面的React组件， 一个getStaticPaths 返回一个[pathname]可能取值的数组, 一个getStaticProps 方法来获取页面中必要的数据。

Next.js 客户端导航

Next.js 支持文件系统导航，一个页面就是从pages目录下 .js、.jsx、.ts 或 .tsx 文件导出的 React 组件。 只需要在项目中的pages目录下创建一个JS文件，导出React组件，到它的路径就是这个文件的URL。
Simply create a JS file under the pages directory, and the path to the file becomes the URL path.
组件可以实现客户端导航，并且可以接收参数 可以更好的控制导航。
allows you to do client-side navigation and accepts props that give you better control over the navigation behavior.

客户端导航使用JS进行页面的切换，比默认的浏览器的导航更快。
Client-side navigation means that the page transition happens using JavaScript, which is faster than the default navigation done by the browser.

History API

可以操作浏览器会话历史。在加载当前页面的选项卡中访问的页面。

是一个全局变量，单例。
只能在主线程（window）上使用。 worker 或worklet不行。