[Docs]: Tutorial: React Router library mode

[brookslybrand]

Describe what's incorrect/missing in the documentation

Using React Router as your routing library is just as viable as using it as your framework

However, we are lacking a dedicated React Router (library mode) tutorial like we had in the v6 docs.

We could just copy this existing one, however, createBrowserRouter is less preferred these days (unless you're building a custom framework), so maybe one that focuses more on the component-driven routing would fill the gap

[einarq]

Curios, why is createBrowserRouter less preferred? Less preferred than what?

When using RR as a library, what would be the preferred option, if you also want to buy in to the benefits of loaders?

[sergiodxa]

I imagine most people using RR as a library don't want the data features, so they only use it as a router, if you wanted the data features the framework mode is better as it gives you more features.

I still think that createBrowserRouter should be the suggested way to use library mode anyway, as it has all the features of Routes component, and it has more features.

[einarq]

But if library mode is given (meaning you are unable to switch to framework mode), then isn’t cBR the best option, considering it also gives you the goodness of loaders etc?
Genuinely curious why it wouldn’t be the preferred library mode option.

It’s what I converted a legacy spa at work to, which is on Webpack etc. Too much work to switch to framework mode.

[brookslybrand]

Curios, why is createBrowserRouter less preferred? Less preferred than what?

When using RR as a library, what would be the preferred option, if you also want to buy in to the benefits of loaders?

That was probably poor choice of words. It's still a perfectly valid way to use React Router. In our minds and we imagine the majority of users either

1. want to use RR as a simple React routing library , which the <Route> components are perfect for
2. want to use RR as a framework with data loading, actions, automatic code splitting, etc. which framework mode is great for

There definitely are users who are uninterested in adopting the Vite plugin for a variety of reasons, in which case createBrowserRouter is perfectly valid for them (see Custom Framework).

For these reasons, I'm not sure if we will create a createBrowserRouter-oriented tutorial. We may! But it might be good just to create the <Routes> one first.

[einarq]

You could be right that the majority of users fall into those two categories I guess.

Still a bit perplexed as to why the data loaders are such a hidden feature in the new docs.

To me they are a great way to be able to get some of the benefit of loaders, without having to switch to framework mode.

For my app (built over many years at work), converting to framework mode is a much bigger task, and maybe not even feasible, and I imagine many older RR apps would have the same issue.

Many of the category 1 users might switch to cBR if they knew about the benefits.

[brookslybrand]

Still a bit perplexed as to why the data loaders are such a hidden feature in the new docs.

Yep, I'm with you, I don't want them to feel like a hidden API. We were trying to simplify the docs and avoid adding too much until we felt it was necessary. We probably over corrected and have a good bit of work to do (this issue representing one of many such issues)

[einarq]

Ok, sounds good :)
Meant data routers btw…

[fooloomanzoo]

The previous docs for v6 provided also a documentation for the components, hooks, utility functions and the common properties like loaders and actions.
Currently in the docs only some use cases are defined but the documentation is missing. Working with this library with a team it would be necessary to be able to reference a documentation.
It would be great if there could be a more complete documentation of the available parts of this library, to work with it.

[einarq]

Fwiw, createBrowserRouter is now mentioned in the latest React blog post :)

https://react.dev/blog/2025/02/14/sunsetting-create-react-app

[drFabio]

@einarq could you please point me to the resources you used for that?

It’s what I converted a legacy spa at work to, which is on Webpack etc. Too much work to switch to framework mode.

I am on the exact same situation and would love to use RR on a CJS with webpack

[einarq]

@drFabio

At the time I did it, these were the docs I used:
https://reactrouter.com/6.30.0/routers/create-browser-router

The new docs are being updated, but createBrowserRouter still has more or less no docs:
https://reactrouter.com/api/data-routers/createBrowserRouter

[drFabio]

Thanks @einarq ! I will attempt it . I already had no success on keeping a legacy webpack alongside a vite. So now I am going the "only webpack" route