[SPIKE] URL Mapping - Dynamic Routing Method

[bendvc]

Description

In this PR I investigate how we might implement the SEO Url Mapping APIs for custom urls and redirects in the PWA. The predominant difference between this PR and the previous PR is that this solution is not dependant on using the withReactQuery HoC and should work once implemented with both legacy getProps and using react-query.

In order to do this, the main integration point was the routes.jsx file that is defined in all PWA-Kit projects. Initially this file defined and exported an array of route configurations, later down the line we allows the developers of templates to export a function that returned the same array object. In this PR we go one step further and allow the developer to define an asynchronous function that will return an array of route configurations.

In order to make this work we had to update the rendering pipeline to wait on the getRoutes function. This does and another link in the chain of calls as does the previous solution, but it seem to be a little more clean.

This solution has it's challenges including what to do on the client where it's important we don't block on yet another network request. For that reason you can see that I am serializing the routes and putting them in the applications configuration to be rebuilt on the client-side. So if you, for example, have a custom url called /hot-summer-deals that links to a custom category page, we want to ensure that this route exists in the browser on load without having to goto the server again. You can see here and here where those changes were made. (NOTE: there are some wrinkles to iron out in this process as there will be issue with out routes are configured with internationalization) .

The Challenge

The challenge in this solution is getting the client side to work. As the API only returns url mappins for any single given url segment we need to ensure that we can update the router dynamically. In order to do this, I'm attempting to build a context that lives inside the Switch component that you can use in conjunction with a hook to modify the routes. So when a user is transitioning from one page to another, we block the transition, then check with the API for a url mapping, if one is found, we update the routes and continue the navigation.

This part of the PR isn't finished yet and it's important that we prove that we can do this before making any decisions.