correct-apricot

Incremental adoption guide

Do we have any examples of incremental adoption from React Router (let's say v5 for example). Is it possible to use @tanstack/router for, let's say, 1-2 routes, so I can experiment with it and convince my team to go further with it? I can explore this if no one had done that before, but any advice is appreciated 🙂

9 Replies

rising-crimson•4y ago

I guess you could technically mount the router with a basePath of an existing route in RR But I've never tried that 😅

correct-apricotOP•4y ago

Interesting, thank you! I guess I'll explore this and post about it if I find something interesting. I think that some people might be interested in that since it could be hard to convince everyone to migrate to a new router and might be easier to start with gradual adoption. In my company, our app is split by routes into different teams and I wanted to try tanstack/router for my part of the app 🙂 I am really sold on the idea of typed (search?) query params.

rising-crimson•3y ago

Awesome! Yeah, I'm happy to help you work through it.

correct-apricotOP•3y ago

Hey! It's been quite some time after I have asked this question. Is there have been any progress with this? If no, I guess I am finally ready to take a first stab 🙂

rising-crimson•3y ago

Let’s do it!

correct-apricotOP•3y ago

Do you have any idea how/where should I start with that? My perfect scenario is to use tanstack/router for, let's say, 1-2 routes and assess the results. Unfortunately, ditching react-router in 1 go is unrealistic. I have 2 perfect route-candidates in my work app, which have less "router magic" (so it's easier to start there) – routeName/featureA and routeName/featureB (since they are under the same routeName, it might be easier for us to "latch" onto it)

rising-crimson•3y ago

Create a history and add the provider Then create only the routes you need and render and outlet where you’d like it to start. Only one way to find out 😉

correct-apricotOP•3y ago

Sure! I'll keep you posted 🙂 I have started with something akin to

<ReactRouterRoute path="/required-path">
  <TanStackRouterProvider router={tanStackRouter} />
</ReactRouterRoute>

<ReactRouterRoute path="/required-path">
  <TanStackRouterProvider router={tanStackRouter} />
</ReactRouterRoute>

I guess I should put TanStackRouterProvider higher up the tree, but this way I'll need to manage "outside" routing by TanstackRouter and I don't want to do it just yet. I'll think more about it. Also, I think I have discoverred a bug with types, https://discord.com/channels/719702312431386674/1135162031587213414 🙂 It feels more like a "gotcha" so maybe you know it, but stilll.

adverse-sapphire•7mo ago

Hey @la.sintez, have you found a way? I'm looking to adopt TanStack router to a large codebase and would love to do it incrementally 😅

Gaming

Programming

Incremental adoption guide

Did you find this page helpful?