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"
- Example app on Github: @remix-run/custom-react-router-framework-example
I'm using react-router 7.5.0, via esm.sh, and react 18.2.0.
On the client, I turn loaders and actions into fetch calls to the backend. This is heavily inspired by here in the Github example.
On the client, I check if the Accept header is JSON and then return the loader or action data. This is heavily inspired by here in the Github example.
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 get access the full loaderData for all nested routes. I even wrote this silly function to combine all the loaderData objects into one big object.
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 here:
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
However, I'm not sure how to handle this on the client here.
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. I am now using query for everything.
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?