Lib Mode: When use the Component prop (config option), pass Route.ComponentProps to the component

[kentcdodds]

When you're using React Router in library mode, you can configure the router with routes that have an element or a component. I think it would make a lot of sense for the component to receive the same component props that you get when using React Router in framework mode to better align these two ways of using React Router.

For example:

createBrowserRouter([
	{
		path: "/:id?",
		loader: appLoader,
		action: appAction,
		Component: AppLayout,
	},
])

function AppLayout({ loaderData, actionData, params, matches }) {
	// etc...
}

As for types, I'm not sure whether there's a good way to make that work, but I expect there is. I just think it would be nice to align these ways of building React Router apps.

[kentcdodds]

As noted by @rossipedia, let's also do this for createRoutesStub 🙏

[GabenGar]

Is this even possible? The framework mode relies on a very specific project structure sprinkled with codegen magic, which is incompatible with library mode being shoved into whatever codebase.

[kentcdodds]

It should definitely be possible.

[nbudin]

I was interested in getting this to work for an experiment I'm working on (attempting to make a project that works in both framework mode and library mode), and I got a very very hacky version of this to work. This is nowhere near good enough to PR yet, but it Works On My Machine™️:

https://github.com/remix-run/react-router/compare/dev...nbudin:react-router:component-props-in-data-router?expand=1

In order to make this work, I had to remove the optimization that pre-renders the Component of the route in mapRouteProperties, because the props now need to vary depending on the router state. I don't love removing an optimization, and if anyone has ideas about how to do it better, I would be very interested in hearing them!

[brookslybrand]

I think this is pretty reasonable, especially given that our new RSC support for data mode allows for this API

In terms of type safety, I don't think we should try to provide any sort of codegen like framework mode has. Framework mode is a our current solution for true type safety for React Router apps

I could see us doing something like:

function AppLayout({ loaderData, actionData}: ComponentProps<typeof loader, typeof action>) {
  /*. */
}

Basically nothing more than what we already have for with useLoader and useAction. These are basically just "trust-me-bro" types, and achieving true type safety would be a much more difficult task in data mode than we want to try to tackle right now and would likely require very big breaking changes.

I'm sure others on the team can weigh in more, but tl;dr:

• data mode component props -- 👍
• data mode type-safe component props -- 👎 (nothing more than a generic)