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.graphqlsenum 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路由提供了一种灵活的方法来为每种页面类型定义根组件，以及为每个模块查找页面类型值。
