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中路由的工作步骤:

  1. MagentoRouter将URL传递给MagentoRouteHandler组件
  2. MagentoRouteHandler使用GraphQL查询Magento 2来解决路由问题,然后从查询接收页面类型。目前,这些页面类型是:CMS_PAGECATEGORYPRODUCT
  3. 如果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路由提供了一种灵活的方法来为每种页面类型定义根组件,以及为每个模块查找页面类型值。