diff --git a/documentation/docs/core/refine-component/index.md b/documentation/docs/core/refine-component/index.md index 7a37f1664748..0ce6de0a8cea 100644 --- a/documentation/docs/core/refine-component/index.md +++ b/documentation/docs/core/refine-component/index.md @@ -720,6 +720,8 @@ Callback to handle all live events. ## ~~catchAll~~ +| 🚨 Use the `` component in your routes instead. + When the app is navigated to a non-existent route, Refine shows a default error page. A custom error component can be used for this error page by passing the customized component to the `catchAll` property: ```tsx title="App.tsx" @@ -736,6 +738,8 @@ const App = () => ( ## ~~LoginPage~~ +| 🚨 Use the `` component in your routes instead. + Refine has a default login page form which is served on the `/login` route when the `authProvider` configuration is provided. Custom login component can be passed to the `LoginPage` property. @@ -754,6 +758,8 @@ const App = () => ( ## ~~DashboardPage~~ +| 🚨 Use the `` component in your routes instead. + A custom dashboard page can be passed to the `DashboardPage` prop which is accessible on the root route. The dashboard item will appear at the top of the sider menu. If `DashboardPage` is not given, the first resource of `resources` will be shown. @@ -790,12 +796,16 @@ const App = () => ( ## ~~Sider~~ +| 🚨 Use `Sider` prop of `` component instead. + The default sidebar can be customized by using Refine hooks and passing custom components to the `Sider` property. > For more information, refer to the [`useMenu` hook documentation →](/docs/core/hooks/utilities/use-menu) ## ~~Footer~~ +| 🚨 Use `Footer` prop of `` component instead. + The default app footer can be customized by passing the `Footer` property. ```tsx title="App.tsx" @@ -812,7 +822,7 @@ const App = () => ( ## ~~Header~~ -The default app header can be customized by passing the `Header` property. +| 🚨 Use `Header` prop of `` component instead. ```tsx title="App.tsx" // highlight-next-line @@ -828,6 +838,8 @@ const App = () => ( ## ~~Layout~~ +| 🚨 Use `` as children of `` instead. + The default layout can be customized by passing the `Layout` property. Layout property will receive individual layout components as property. @@ -873,6 +885,8 @@ const App = () => ( ## ~~OffLayoutArea~~ +| 🚨 Use `OffLayoutArea` prop of `` component instead. + The component wanted to be placed out of the app layout structure can be set by passing to the `OffLayoutArea` prop. ```tsx title="App.tsx" @@ -888,6 +902,8 @@ const App = () => ( ## ~~Title~~ +| 🚨 Use `Title` prop of `` component instead. + The app title can be set by passing the `Title` property. ```tsx title="App.tsx"