React中的路由非常复杂,考虑到Magento 2提供了很多与URL相关的功能(比如URL重写),尝试使其适应Magento 2可能是一个非常具有挑战性的任务。幸运的是,Magento PWA Studio为处理Magento 2 URL-s提供了一个非常灵活的内置解决方案。在本篇博客中,我们将研究Magento PWA Studio路由和根组件概念。
请注意,在撰写本文时,Magento PWA Studio还处于早期开发阶段,因此一些细节可能已经过时,这取决于您阅读本文的时间。
Magento PWA Studio Peregrine软件包附带了一个MagentoRouter组件,它是React路由器的包装器, 并扩展了Magento特定的路由处理功能。MagentoRouter compontent位于pwa studio所在文件夹中的以下路径:
packages/peregrine/src/Router/Router.js
目前,MagentoRouter仅支持3种类型的页面URL:
- CMS页面
- 分类页面
- 产品页面
Magento PWA Studio中的路由如何工作
React Router扩展了Magento路由功能,该功能基本上要求Magento 2(使用GraphQL)根据接收到的URL返回页面类型变量。当Magento 2返回页面类型时,Magento路由呈现分配给相应页面类型的根组件。
以下是在Magento PWA Studio中路由的工作步骤:
- MagentoRouter将URL传递给MagentoRouteHandler组件
- MagentoRouteHandler使用GraphQL查询Magento 2来解决路由问题,然后从查询接收页面类型。目前,这些页面类型是:CMS_PAGE、CATEGORY和PRODUCT
- 如果URL不存在,Magento 2将发送404错误(在实现正确的404页面类型之前是暂时的)。如果URL存在,MagentoRouter将呈现一个分配给接收到的页面类型的RootComponent。
如何为特定页面类型指定根组件
在Magento PWA studio主题中,所有根组件文件夹必须放在以下路径中:
src/RootComponents/
Magento PWA studio的一个有趣的特性是根组件不是由文件类型指定的,因此您可以根据自己的喜好为特定于页面的根组件文件夹命名。例如,对于CMS_PAGE类型,我们可以创建以下子文件夹:
src/RootComponents/MyCMS/
然后在子文件夹中我们创建带有如下内容的index.js入口点文件,这是有趣的地方:
/**
* @RootComponent
* description = 'Basic CMS Page'
* pageTypes = CMS_PAGE
*/
export { default } from './path/to/cms/main/component;
如您所见,index.js中的注释部分为特定的页面类型定义了根组件。如果我们将pageTypes变量值改为PRODUCT(再次执行代码拆分需要重新启动webpack),则此组件将用于Product页面,而不是之前指定的CMS页面。
在哪里查看特定页面的页面类型
由于Magento PWA Studio还处于开发阶段,所以页面类型仅限于博客中提到的三种类型(CMS、category和product)。当Magento PWA Studio完全发布时,记住所有的页面类型值是非常困难的,更不用说自定义页面类型值了,以防我们添加一些自定义创建的页面或由扩展创建的页面。幸运的是,我们可以从GraphQL模式中查看页面类型。
Magento 2.3 核心代码附带了一些适用于GraphQL的模块,每个包含GraphQL的模块都带有一个GraphQL模式,基本上是一个非常详细且可访问的GraphQL查询文档,它指定哪些GraphQL查询可用、类型、接口等。例如,让我们打开以下文件:
Magento/CatalogUrlRewriteGraphQl/etc/schema.graphqls
我们可以看到以下内容:
enum UrlRewriteEntityTypeEnum @doc(description: "This enumeration defines the entity type.") {
PRODUCT
CATEGORY
}
这些是产品页面和类别页面的页面类型,可以在RootComponents分配中使用。现在我们知道在哪里查看GraphQL模式数据,遵循路径和命名模式,您可以在以下位置很容易找到CMS页面的页面类型值:
Magento/CmsUrlRewriteGraphQl/etc/schema.graphqls
enum UrlRewriteEntityTypeEnum {
CMS_PAGE
}
这是我们在本文的示例中使用的值,因此,您可以打开正在使用的模块里的schema.graphqls文件或通过搜索UrlRewriteEntityTypeEnum 字符串列出所有可能的值来了解要使用的页面类型值。
Peregrine软件包是Magento PWA工作室的一部分,它带有一个用于React Router的Magento Router包装器,它使React Router适应Magento 2 URL逻辑。Magento Router提供了一种灵活的方法来为每种页面类型定义根组件,以及为每个模块查找页面类型变量值的简便方法。看看Magento PWA Studio将如何处理其他Magento 2特定功能(如布局更新)将会很有趣。
Peregrine包是Magento PWA studio的一部分,它为React路由提供了一个Magento路由包装器,该包装器使React路由适应Magento 2 URL逻辑。Magento路由提供了一种灵活的方法来为每种页面类型定义根组件,以及为每个模块查找页面类型值。