[doc]: Tapping into Routes

[aagasi]

Describe the request
In the same way we tap into the routes to "push" new routes we can also change the default routes defined in /packages/venia-ui/lib/defaultRoutes.json

Possible solutions
How would you word this addition or change?

Screenshots
As we can see in the following image, makeRoutesTarget() initializes the Routes component. As part of this initialization if we have a target interceptor that "pushes" new routes to the routes array they will be added. Therefore in the routeList variable we'll have all those custom routes. After this, addRoutes(routeList, require('../defaultRoutes.json')) method is called with 2 params. The 2nd params is an array of default routes pre-defined for pwa.

If we need to edit some of the default pre-defined routes we can do it in our custom interceptor by tapping into routes target and specifiying the "pattern" that we want to update (see following image):

In the prior example, the "/communications" route is being updated to redirect to 404 whenever someone tries to access it.

[m2-assistant]

Hi @aagasi. Thank you for your report.
To help us process this issue please make sure that you provided sufficient information.

Please, add a comment to assign the issue: @magento I am working on this

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.

[sirugh]

@magento export issue to JIRA project PWA as Task

[github-jira-sync-bot]

✅ Jira issue (https://jira.corp.magento.com/browse/PWA-1664) is successfully created for this issue.

[supernova-at]

Hi @aagasi , thanks for reporting this.

We have just triaged it and assigned it to an upcoming epic expanding extensibility. Unfortunately we do not have an estimate on when this will be completed at this time.

[evan-burrell]

@supernova-at

Would something like this suffice in @magento/venia-ui/lib/targets/makeRoutesTarget.js:

-    const routeList = venia.reactComponent(
+    venia.reactComponent(
         '@magento/venia-ui/lib/components/Routes/routes.js',
-        async ({ routes }, self) => addRoutes(self, await routes.promise([]))
+        async ({ routes }, self) => addRoutes(self, await routes.promise(require('../defaultRoutes.json')))
     );
-
-    // Add our own default routes!
-    addRoutes(routeList, require('../defaultRoutes.json'));
 }

Happy to make a PR for this

[Jordaneisenburger]

@evan-burrell this is also an issue for a project I'm working on, your fix seems to resolve the issue and makes the routes tappable again.

[rvr31]

Well I guess the routes is already tappable and tapping does work, but it gets loaded twice.
Once from the:

// Add our own default routes!
addRoutes(routeList, require('../defaultRoutes.json'));

That one is not tapable and will always load the default routes and add them.
And once from the:

async ({ routes }, self) => addRoutes(self, await routes.promise([]))

Also containing the default routes. So removing or changing routes will always keep the original due the the extra untappable addRoutes.