Incremental migration from React Router to App Router

[faint ridge]

I have recently migrated from Vite to Next.js following the guide on the website, my app is served as a single client component with its React Router routing still intact, now I am looking at how I can incrementally adopt the app router, but am having some difficulties.

One problem I am facing is how to handle linking, I have a Navigation component which uses react router <Link> components, however, since the RouterProvider is only rendered for the catchall route which uses React Router, the Navigation component throws an error on the new App Router route since Link needs a RouterProvider to work. So I tried replacing the React Router <Link> with the next/link <Link>, and while it compiles now, it only works for routes that are in the App Router, for other links it will reload the page, but ultimately always choose the first route in the React Router config, does anyone have any experience with a incremental react router to app router migration?

[jagged parrot]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[compact token]

it only works for routes that are in the App Router, for other links it will reload the page - this is expected and reasonable

what is your trouble exactly? @faint ridge

[faint ridge]

A page reload is fine, however it doesn't actually render the correct RR page after the reload, it always picks the first one, this probably has more to do with RR than Next.js, but I am curious if anyone has any tips on how to migrate incrementally

[compact token]

oh you need incremental migration hmm

[faint ridge]

I've tried both Link components, and they will only work for their respective router systems, which makes sense. The only way I can link between seems to be with a regular old <a>

The difficulty is knowing which type of link to use

[compact token]

I think it's nothing related to a vs next/link

next/link is just next.js built in component for client side navigation with cache strategy

so let say you have a link to /dashboard, and do you have the corresponding page for that link?

[faint ridge]

next/link will not link to the correct RR page, but <a> does, it's weird though because the URL gets updated correctly

I think RR doesn't react to the change, it will render the previously rendered route

[compact token]

I don't think I understood the root point - so you mean you use react router in next.js?

[faint ridge]

I followed this guide https://nextjs.org/docs/app/building-your-application/upgrading/from-vite

I now have one single route in app which is a catch all [[...slug]] that then renders my old App.tsx with a React Router setup, I now want to start moving routes from the old RR router to the App Router.