How to handle async paths?

[iamkimchico]

Hi!

I'm writing here because i couldn't find a clear answer in the documentation.

My Question
I'm wondering how I'm supposed to handle/render paths that i get from a fetch? I can only seem to find how to handle async content within a known path.

My issue and setup:
I have a React SPA with a Headless CMS connected. I get a bunch of nodes from the CMS and each node has its own path (defined in the CMS). This means that when a user enters my site I don't know any routes other than "/". When the user hits this route i fetch all the nodes and renders the node matching the path. The same goes for any routes like "/abc". If none of the nodes has the matched path i redirect to a 404.

This setup gives some headaches as you can imagine. The site is a big multi-step form, why I want it to be a SPA. But the marketing department requires urls, so I have to do the whole routing thing.

Currently I use react-router-dom v.5 where I catch all routes and resolves them in a custom wrapper according to the path. So not really traditional routing, but it was the best solution I could find.

So..
What would you do? And can I get a better architecture using React Location with proper routing?

Thanks!