update guides (end)

Author: slax57

docs_headless/src/content/docs/guides/Routing.md

@@ -1,24 +1,21 @@
 ---
-layout: default
-title: "Routing in React-Admin Apps"
+title: "Routing"
 ---
 
-# Routing
-
-React-admin uses [the react-router library](https://reactrouter.com/) to handle routing. This allows to use different routing strategies, and to integrate a react-admin app inside another app.
+Ra-core uses [the react-router library](https://reactrouter.com/) to handle routing. This allows to use different routing strategies, and to integrate an ra-core app inside another app.
 
 ## Route Structure
 
-For each `<Resource>`, react-admin creates 4 routes:
+For each `<Resource>`, ra-core creates 4 routes:
 
 * `/:resource`: the list page
 * `/:resource/create`: the create page
 * `/:resource/:id/edit`: the edit page
 * `/:resource/:id/show`: the show page
 
-These routes are fixed (i.e. they cannot be changed via configuration). Having constant routing rules allow react-admin to handle cross-resource links natively. 
+These routes are fixed (i.e. they cannot be changed via configuration). Having constant routing rules allow ra-core to handle cross-resource links natively.
 
-**Tip**: React-admin allows to use resource names containing slashes, e.g. 'cms/categories'.
+**Tip**: Ra-core allows to use resource names containing slashes, e.g. 'cms/categories'.
 
 ## Linking To A Page
 
@@ -37,11 +34,11 @@ const Dashboard = () => (
 );
 ```
 
-Internally, react-admin uses a helper to build links, to allow mounting react-admin apps inside an existing app. You can use this helper, `useCreatePath`, in your components, if they have to work in admins mounted in a sub path:
+Internally, ra-core uses a helper to build links, to allow mounting ra-core apps inside an existing app. You can use this helper, `useCreatePath`, in your components, if they have to work in admins mounted in a sub path:
 
 ```jsx
 import { Link } from 'react-router-dom';
-import { useCreatePath } from 'react-admin';
+import { useCreatePath } from 'ra-core';
 
 const Dashboard = () => {
     const createPath = useCreatePath();
@@ -76,16 +73,14 @@ export const usePageTracking = () => {
 }
 ```
 
-Then, use that hook in a [custom layout](./Admin.md#layout):
+Then, use that hook in your [layout](../app-configuration/CoreAdmin.md#layout):
 
 ```jsx
-import { Layout } from 'react-admin';
-
 import { usePageTracking } from './usePageTracking';
 
 export const MyLayout = ({ children }) => {
     usePageTracking();
-    return <Layout>{children}</Layout>;
+    return <div className="admin-layout">{children}</div>;
 }
 ```
 
@@ -97,66 +92,66 @@ export const MyLayout = ({ children }) => {
 
 ## Adding Custom Pages
 
-In addition to CRUD pages for resources, you can create as many routes as you want for your custom pages. Use [the `<CustomRoutes>` component](./CustomRoutes.md) to do so.
+In addition to CRUD pages for resources, you can create as many routes as you want for your custom pages. Use [the `<CustomRoutes>` component](../app-configuration/CustomRoutes.md) to do so.
 
 ```jsx
 // in src/App.js
 import * as React from "react";
 import { Route } from 'react-router-dom';
-import { Admin, Resource, CustomRoutes } from 'react-admin';
+import { CoreAdmin, Resource, CustomRoutes } from 'ra-core';
 import posts from './posts';
 import comments from './comments';
 import Settings from './Settings';
 import Profile from './Profile';
 
 const App = () => (
-    <Admin dataProvider={simpleRestProvider('http://path.to.my.api')}>
+    <CoreAdmin dataProvider={simpleRestProvider('http://path.to.my.api')}>
         <Resource name="posts" {...posts} />
         <Resource name="comments" {...comments} />
         <CustomRoutes>
             <Route path="/settings" element={<Settings />} />
             <Route path="/profile" element={<Profile />} />
         </CustomRoutes>
-    </Admin>
+    </CoreAdmin>
 );
 
 export default App;
 ```
 
 ## Using A Custom Router
 
-React-admin uses [the react-router library](https://reactrouter.com/) to handle routing, with a [HashRouter](https://reactrouter.com/en/routers/create-hash-router). This means that the hash portion of the URL (i.e. `#/posts/123` in the example) contains the main application route. This strategy has the benefit of working without a server, and with legacy web browsers. 
+Ra-core uses [the react-router library](https://reactrouter.com/) to handle routing, with a [HashRouter](https://reactrouter.com/en/routers/create-hash-router). This means that the hash portion of the URL (i.e. `#/posts/123` in the example) contains the main application route. This strategy has the benefit of working without a server, and with legacy web browsers.
 
-But you may want to use another routing strategy, e.g. to allow server-side rendering of individual pages. React-router offers various Router components to implement such routing strategies. If you want to use a different router, simply put your app in a create router function. React-admin will detect that it's already inside a router, and skip its own router. 
+But you may want to use another routing strategy, e.g. to allow server-side rendering of individual pages. React-router offers various Router components to implement such routing strategies. If you want to use a different router, simply put your app in a create router function. Ra-core will detect that it's already inside a router, and skip its own router.
 
 ```tsx
 import { RouterProvider, createBrowserRouter } from 'react-router-dom';
-import { Admin, Resource } from 'react-admin';
+import { CoreAdmin, Resource } from 'ra-core';
 import { dataProvider } from './dataProvider';
 
 const App = () => {
     const router = createBrowserRouter([
         {
             path: "*",
             element: (
-                <Admin dataProvider={dataProvider}>
+                <CoreAdmin dataProvider={dataProvider}>
                     <Resource name="posts" />
-                </Admin>
+                </CoreAdmin>
             ),
         },
     ]);
     return <RouterProvider router={router} />;
 };
 ```
 
-## Using React-Admin In A Sub Path
+## Using Ra-Core In A Sub Path
 
-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`).
+Ra-core links are absolute (e.g. `/posts/123/show`). If you serve your admin from a sub path (e.g. `/admin`), ra-core 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 [`createBrowserRouter`](https://reactrouter.com/en/main/routers/create-browser-router) for instance), you need to set the [`opts.basename`](https://reactrouter.com/en/main/routers/create-browser-router#optsbasename) of `createBrowserRouter` function, 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 [`createBrowserRouter`](https://reactrouter.com/en/main/routers/create-browser-router) for instance), you need to set the [`opts.basename`](https://reactrouter.com/en/main/routers/create-browser-router#optsbasename) of `createBrowserRouter` function, so that ra-core routes include the basename in all links (e.g. `/admin/posts/123/show`).
 
 ```tsx
-import { Admin, Resource } from 'react-admin';
+import { CoreAdmin, Resource } from 'ra-core';
 import { RouterProvider, createBrowserRouter } from 'react-router-dom';
 import { dataProvider } from './dataProvider';
 
@@ -166,9 +161,9 @@ const App = () => {
             {
                 path: "*",
                 element: (
-                    <Admin dataProvider={dataProvider}>
+                    <CoreAdmin dataProvider={dataProvider}>
                         <Resource name="posts" />
-                    </Admin>
+                    </CoreAdmin>
                 ),
             },
         ],
@@ -182,11 +177,11 @@ This makes all links be prefixed with `/admin`.
 
 Note that it is your responsibility to serve the admin from the sub path, e.g. by setting the `base` field in `vite.config.ts` if you use [Vite.js](https://vitejs.dev/config/shared-options.html#base), or the `homepage` field in `package.json` if you use [Create React App](https://create-react-app.dev/docs/deployment/#building-for-relative-paths).
 
-If you want to use react-admin as a sub path of a larger React application, check the next section for instructions. 
+If you want to use ra-core as a sub path of a larger React application, check the next section for instructions. 
 
-## Using React-Admin Inside a Route
+## Using Ra-Core Inside a Route
 
-You can include a react-admin app inside another app, using a react-router `<Route>`:
+You can include an ra-core app inside another app, using a react-router `<Route>`:
 
 ```tsx
 import { RouterProvider, Routes, Route, createBrowserRouter } from 'react-router-dom';
@@ -211,22 +206,22 @@ export const App = () => {
 };
 ```
 
-React-admin will have to prefix all the internal links with `/admin`. Use the `<Admin basename>` prop for that:
+Ra-core will have to prefix all the internal links with `/admin`. Use the `<CoreAdmin basename>` prop for that:
 
 ```tsx
 // in src/StoreAdmin.js
-import { Admin, Resource } from 'react-admin';
+import { CoreAdmin, Resource } from 'ra-core';
 import { dataProvider } from './dataProvider';
 import posts from './posts';
 
 export const StoreAdmin = () => (
-    <Admin basename="/admin" dataProvider={dataProvider}>
+    <CoreAdmin basename="/admin" dataProvider={dataProvider}>
         <Resource name="posts" {...posts} />
-    </Admin>
+    </CoreAdmin>
 );
 ```
 
-This will let react-admin build absolute URLs including the sub path.
+This will let ra-core build absolute URLs including the sub path.
 
 ## Troubleshooting
 
@@ -250,11 +245,11 @@ or
 
 > `<Route>` may be used only in the context of a `<Router>` component
 
-These errors can happen if you added `react-router` and/or `react-router-dom` to your dependencies, and didn't use the same version as react-admin. In that case, your application has two versions of react-router, and the calls you add can't see the react-admin routing context.
+These errors can happen if you added `react-router` and/or `react-router-dom` to your dependencies, and didn't use the same version as ra-core. In that case, your application has two versions of react-router, and the calls you add can't see the ra-core routing context.
 
 You can use the `npm list react-router` and `npm list react-router-dom` commands to check which versions are installed.
 
-If there are duplicates, you need to make sure to use only the same version as react-admin. You can deduplicate them using yarn's `resolutions` or npm's `overrides`.
+If there are duplicates, you need to make sure to use only the same version as ra-core. You can deduplicate them using yarn's `resolutions` or npm's `overrides`.
 
 ```js
 // in packages.json
@@ -267,4 +262,3 @@ If there are duplicates, you need to make sure to use only the same version as r
 }
 ```
 
-This may also happen inside a [Remix](https://remix.run/) application. See [Setting up react-admin for Remix](./Remix.md#setting-up-react-admin-in-remix) for instructions to overcome that problem.