Incremental migration from React Router to App Router
Unanswered
Oak apple gall wasp posted this in #help-forum
Oak apple gall waspOP
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?
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?
14 Replies
it only works for routes that are in the App Router, for other links it will reload the page - this is expected and reasonablewhat is your trouble exactly? @Oak apple gall wasp
Oak apple gall waspOP
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
oh you need incremental migration hmm
Oak apple gall waspOP
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
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?
Oak apple gall waspOP
next/link will not link to the correct RR page, but
<a> does, it's weird though because the URL gets updated correctlyI think RR doesn't react to the change, it will render the previously rendered route
I don't think I understood the root point - so you mean you use react router in next.js?
Oak apple gall waspOP
I followed this guide https://nextjs.org/docs/app/building-your-application/upgrading/from-vite
I now have one single route in
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.It's a very big project with hundreds of routes, deeply nested in 5 different apps that share packages etc etc. It has to be an incremental adoption, otherwise we will be blocked for months