I assumed that you’re familiar with how to create an extension in the PWA Studio if not then I recommend you to check it out

• 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;
    });
}

file source: https://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-relates to each other and how priority works.