Merge pull request #9956 from marmelab/update-routing-documentation

Update routing documentation

docs/Admin.md

@@ -341,18 +341,33 @@ The Auth Provider also lets you configure redirections after login/logout, anony
 Use this prop to make all routes and links in your Admin relative to a "base" portion of the URL pathname that they all share. This is required when using the [`BrowserRouter`](https://reactrouter.com/en/main/router-components/browser-router) to serve the application under a sub-path of your domain (for example https://marmelab.com/ra-enterprise-demo), or when embedding react-admin inside a single-page app with its own routing.
 
 ```tsx
-import { Admin } from 'react-admin';
-import { BrowserRouter } from 'react-router-dom';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { StoreFront } from './StoreFront';
+import { StoreAdmin } from './StoreAdmin';
 
-const App = () => (
+export const App = () => (
     <BrowserRouter>
-        <Admin basename="/admin">
-            ...
-        </Admin>
+        <Routes>
+            <Route path="/" element={<StoreFront />} />
+            <Route path="/admin/*" element={<StoreAdmin />} />
+        </Routes>
     </BrowserRouter>
 );
 ```
 
+React-admin will have to prefix all the internal links with `/admin`. Use the `<Admin basename>` prop for that:
+
+```jsx
+// in src/StoreAdmin.js
+import { Admin, Resource } from 'react-admin';
+
+export const StoreAdmin = () => (
+    <Admin basename="/admin" dataProvider={...}>
+        <Resource name="posts" {...posts} />
+    </Admin>
+);
+```
+
 See [Using React-Admin In A Sub Path](#using-react-admin-in-a-sub-path) for more usage examples.
 
 ## `catchAll`

docs/Routing.md

@@ -146,14 +146,14 @@ const App = () => (
 
 React-admin links are absolute (e.g. `/posts/123/show`). If you serve your admin from a sub path (e.g. `/admin`), react-admin works seamlessly as it only appends a hash (URLs will look like `/admin#/posts/123/show`).
 
-However, if you serve your admin from a sub path AND use another Router (like `BrowserRouter` for instance), you need to set the `<Admin basename>` prop, so that react-admin routes include the basename in all links (e.g. `/admin/posts/123/show`).
+However, if you serve your admin from a sub path AND use another Router (like `BrowserRouter` for instance), you need to set the `<BrowserRouter basename>` prop, so that react-admin routes include the basename in all links (e.g. `/admin/posts/123/show`).
 
 ```jsx
 import { Admin, Resource } from 'react-admin';
 
 const App = () => (
-    <BrowserRouter>
-        <Admin basename="/admin" dataProvider={...}>
+    <BrowserRouter basename="/admin">
+        <Admin dataProvider={...}>
             <Resource name="posts" />
         </Admin>
     </BrowserRouter>