docs(upgrading/remix): show entry files diff (#12158)

Co-authored-by: Michaël De Boey <[email protected]>
Co-authored-by: Matt Brophy <[email protected]>

Author: 3 people

contributors.yml

@@ -240,6 +240,7 @@
 - SimenB
 - SkayuX
 - smithki
+- soartec-lab
 - sorrycc
 - souzasmatheus
 - srmagura

docs/upgrading/remix.md

@@ -89,12 +89,29 @@ export const routes: RouteConfig = flatRoutes();
 
 ### Step 6 - Rename components in entry files
 
-If you have an `entry.server.tsx` and/or an `entry.client.tsx` file in your application, you will need to rename the main components in this files:
+If you have an `entry.server.tsx` and/or an `entry.client.tsx` file in your application, you will need to update the main components in these files:
+
+```diff filename=app/entry.server.tsx
+- import { RemixServer } from "@remix-run/react";
++ import { ServerRouter } from "react-router";
+
+- <RemixServer context={remixContext} url={request.url} />,
++ <ServerRouter context={remixContext} url={request.url} />,
+```
+
+```diff filename=app/entry.client.tsx
+- import { RemixBrowser } from "@remix-run/react";
++ import { HydratedRouter } from "react-router/dom";
+
+hydrateRoot(
+  document,
+  <StrictMode>
+-   <RemixBrowser />
++   <HydratedRouter />
+  </StrictMode>,
+);
+```
 
-| Entry File         | Remix v2 Component |     | React Router v7 Component |
-| ------------------ | ------------------ | --- | ------------------------- |
-| `entry.server.tsx` | `<RemixServer>`    | ➡️  | `<ServerRouter>`          |
-| `entry.client.stx` | `<RemixBrowser>`   | ➡️  | `<HydratedRouter>`        |
 
 ### Step 7 - Update types for `AppLoadContext`