docs: updates for create*Router functions

Author: ryanflorence

docs/components/index.md

@@ -1,4 +1,4 @@
 ---
 title: Components
-order: 3
+order: 6
 ---

docs/components/routes.md

@@ -17,7 +17,7 @@ interface RoutesProps {
 </Routes>;
 ```
 
-Note that if you're using a data router like [`<DataBrowserRouter>`][databrowserrouter] it is uncommon to use this component as it does not participate in data loading.
+<docs-info>If you're using a data router like [`createBrowserRouter`][createbrowserrouter] it is uncommon to use this component as it does not participate in data loading.</docs-info>
 
 Whenever the location changes, `<Routes>` looks through all its child routes to find the best match and renders that branch of the UI. `<Route>` elements may be nested to indicate nested UI, which also correspond to nested URL paths. Parent routes render their child routes by rendering an [`<Outlet>`][outlet].
 
@@ -37,4 +37,4 @@ Whenever the location changes, `<Routes>` looks through all its child routes to
 [location]: ../hook/location
 [outlet]: ./outlet
 [use-route]: ../hooks/use-routes
-[databrowserrouter]: ../routers/data-browser-router
+[createbrowserrouter]: ../routers/create-browser-router

docs/components/scroll-restoration.md

@@ -9,29 +9,17 @@ This component will emulate the browser's scroll restoration on location changes
 
 You should only render one of these and it's recommended you render it in the root route of your app:
 
-```tsx [5,12]
-import * as React from "react";
-import * as ReactDOM from "react-dom";
-import {
-  DataBrowserRouter,
-  ScrollRestoration,
-} from "react-router-dom";
-
-function Root() {
+```tsx [1,7]
+import { ScrollRestoration } from "react-router-dom";
+
+function RootRouteComponent() {
   return (
     <div>
       {/* ... */}
       <ScrollRestoration />
     </div>
   );
 }
-
-ReactDOM.render(
-  <DataBrowserRouter>
-    <Route element={<Root />}>{/* child routes */}</Route>
-  </DataBrowserRouter>,
-  root
-);
 ```
 
 ## `getKey`

docs/elements.md

@@ -102,63 +102,63 @@ And then there’s the `<dl>` lists:
 Normal code:
 
 ```tsx
-<DataBrowserRouter initialEntries={["/events/123"]}>
+<WhateverRouter initialEntries={["/events/123"]}>
   <Route path="/" element={<Root />} loader={rootLoader}>
     <Route
       path="events/:id"
       element={<Event />}
       loader={eventLoader}
     />
   </Route>
-</DataBrowserRouter>
+</WhateverRouter>
 ```
 
 With multiple highlighted lines:
 
 ```tsx lines=[1-2,5]
-<DataBrowserRouter initialEntries={["/events/123"]}>
+<WhateverRouter initialEntries={["/events/123"]}>
   <Route path="/" element={<Root />} loader={rootLoader}>
     <Route
       path="events/:id"
       element={<Event />}
       loader={eventLoader}
     />
   </Route>
-</DataBrowserRouter>
+</WhateverRouter>
 ```
 
 With a filename:
 
 ```tsx filename=src/main.jsx
-<DataBrowserRouter initialEntries={["/events/123"]}>
+<WhateverRouter initialEntries={["/events/123"]}>
   <Route path="/" element={<Root />} loader={rootLoader}>
     <Route
       path="events/:id"
       element={<Event />}
       loader={eventLoader}
     />
   </Route>
-</DataBrowserRouter>
+</WhateverRouter>
 ```
 
 Bad code:
 
 ```tsx bad
-<DataBrowserRouter initialEntries={["/events/123"]}>
+<WhateverRouter initialEntries={["/events/123"]}>
   <Route path="/" element={<Root />} loader={rootLoader}>
     <Route
       path="events/:id"
       element={<Event />}
       loader={eventLoader}
     />
   </Route>
-</DataBrowserRouter>
+</WhateverRouter>
 ```
 
 Bad code with highlighted lines and a filename:
 
 ```tsx filename=src/main.jsx bad lines=[2-5]
-<DataBrowserRouter initialEntries={["/events/123"]}>
+<WhateverRouter initialEntries={["/events/123"]}>
   <Routes>
     <Route path="/" element={<Root />} loader={rootLoader}>
       <Route
@@ -168,7 +168,7 @@ Bad code with highlighted lines and a filename:
       />
     </Route>
   </Routes>
-</DataBrowserRouter>
+</WhateverRouter>
 ```
 
 Lines that overflow:

docs/fetch/index.md

@@ -1,4 +1,4 @@
 ---
 title: Fetch Utilities
-order: 5
+order: 8
 ---