Extract remix logic out of RouterProvider into HydratedRouter (#11469)

Author: brophdawg11

.changeset/create-remix-router.md

@@ -0,0 +1,5 @@
+---
+"react-router-dom": major
+---
+
+Use `createRemixRouter`/`RouterProvider` in `entry.client` instead of `RemixBrowser`

integration/vite-css-test.ts

@@ -45,15 +45,15 @@ const files = {
   "app/entry.client.tsx": js`
     import "./entry.client.css";
 
-    import { RouterProvider } from "react-router-dom";
+    import { HydratedRouter } from "react-router-dom";
     import { startTransition, StrictMode } from "react";
     import { hydrateRoot } from "react-dom/client";
 
     startTransition(() => {
       hydrateRoot(
         document,
         <StrictMode>
-          <RouterProvider />
+          <HydratedRouter />
         </StrictMode>
       );
     });

integration/vite-spa-mode-test.ts

@@ -323,15 +323,15 @@ test.describe("SPA Mode", () => {
             </html>
           `,
           "app/entry.client.tsx": js`
-            import { RouterProvider } from "react-router-dom";
+            import { HydratedRouter } from "react-router-dom";
             import { startTransition, StrictMode } from "react";
             import { hydrateRoot } from "react-dom/client";
 
             startTransition(() => {
               hydrateRoot(
                 document.querySelector("#app"),
                 <StrictMode>
-                  <RouterProvider />
+                  <HydratedRouter />
                 </StrictMode>
               );
             });

packages/react-router-dom/__tests__/ssr/components-test.tsx

@@ -9,6 +9,7 @@ import {
   Outlet,
   RouterProvider,
 } from "../../index";
+import { HydratedRouter } from "../../ssr/browser";
 import { RemixContext } from "../../ssr/components";
 import invariant from "../../ssr/invariant";
 import { RemixServer } from "../../ssr/server";
@@ -214,7 +215,7 @@ describe("<RemixServer>", () => {
   });
 });
 
-describe("<RemixBrowser>", () => {
+describe("<HydratedRouter>", () => {
   it("handles empty default export objects from the compiler", () => {
     window.__remixContext = {
       url: "/",
@@ -263,7 +264,7 @@ describe("<RemixBrowser>", () => {
 
     jest.spyOn(console, "error");
 
-    let { container } = render(<RouterProvider />);
+    let { container } = render(<HydratedRouter />);
 
     expect(console.error).not.toHaveBeenCalled();
     expect(container.innerHTML).toMatch("<h1>Root</h1>");