Relation between custom URL Pattern and Component Path in PWA Studio

I assumed that you’re familiar with how to create an extension in the PWA Studio. If not, then I recommend you to check out the following resources:

• PWA Studio extension generator
  • yarn create @larsroettig/pwa-extension

In our custom extension, we can register and manage custom routes in the intercept.js file. For example:

module.exports = targets => {
    targets.of('@magento/venia-ui').routes.tap((routes) => {
        routes.push({
            name: 'Blogs',
            pattern: '/blog',
            path: '@dankhrapiyush/blog/lib/components/Blogs'
        });
        routes.push({
            name: 'Blog',
            pattern: '/blog/post/:id?',
            path: '@dankhrapiyush/blog/lib/components/Blog'
        });
        routes.push({
            name: 'BlogCategory',
            pattern: '/blog/category/:id?',
            path: '@dankhrapiyush/blog/lib/components/Category'
        });
        routes.push({
            name: 'BlogTag',
            pattern: '/blog/tag/:id?',
            path: '@dankhrapiyush/blog/lib/components/Tag'
        });
        return routes;
    });
}intercept.js

File source: github.com/dankhrapiyush/blog/blob/master/intercept.js

As we noticed in the code snippet, the route definition object has three parameters:

• name: Define a user-friendly name for our internal purpose.
• pattern: Path pattern to resolve the URL path.
• path: React component path that will render in the frontend.

On the frontend, it matches the routes’ pattern in the bottom-to-top order and renders the component set in the path parameter.

Let’s say if the requested URL is:

• yoursite.com/blog

  • It renders the @dankhrapiyush/blog/lib/components/Blogs component.

• yoursite.com/blog/post/hello-world

  • It matches the pattern /blog/post/:id? and renders the @dankhrapiyush/blog/lib/components/Blog component.

• yoursite.com/blog/tag/pwastudio

  • It renders the @dankhrapiyush/blog/lib/components/Tag component.
  • In the first view, you might think why not the @dankhrapiyush/blog/lib/components/Blogs component? Now you know the answer, that is “bottom-to-top” order.

I hope it clears the idea about how routes pattern and path co-relate to each other and how priority works.