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!