I have some questions about how to set up React Router 7 as a "custom framework". It seems like the documentation on this is mostly these two pages:
- Docs on React Router 7: "Custom Framework"
- Small example app on Github: @remix-run/custom-react-router-framework-example
On the client, I turn loaders and actions into fetch calls to the backend. This is heavily inspired by the Github example:
https://www.val.town/x/stevekrouse/reactRouter7Example/code/shared/routes.ts
On the client, I check if the Accept header is JSON and then return the loader or action data:
https://www.val.town/x/stevekrouse/reactRouter7Example/code/backend/index.ts#L66-77
Right now I've converted every loader into its own fetch call. This is the opposite of what frameworks refer to as "single fetch". However on the backend, I actually do the single fetch thing, and get access to the full loaderData for all nested routes. I even wrote this silly function to combine all the objects into one big object:
https://www.val.town/x/stevekrouse/reactRouter7Example/code/backend/index.ts#L36-50
Ideally we should make a single loader call per navigation event, and set the internal router state. In other words, I would like to somehow reach into React Router and set this state, and then let useLoaderData funnel the correct loader data's to the correct routes via their IDs:
When my backend returns a 302 from an action, how should I handle this on the frontend?
For example, after you create a new topic on the home page, I redirect you to that topic's ID:
https://www.val.town/x/stevekrouse/reactRouter7Example/code/routes/Topics.action.ts#L13
However, I'm not sure how to handle this on the client:
https://www.val.town/x/stevekrouse/reactRouter7Example/code/shared/routes.ts#L26
Ideally, I would do a proper React Router "navigation", and pass the relevant loader data along so it can be 100% client-side and require no other API calls.
The example app uses queryRoute instead of query for loaders and actions. I tried using that too but it didn't work. I think it returned undefined. Is it better to use that or is my use of query fine? I get the feeling that query is doing a bunch of work I don't need, ie SRR, but maybe that's not very expensive so it's fine? I noticed the example app uses X-Route-ID, so maybe I'd need to use that?