From 8e8f3d80d3f335bae4e4340a2a2ff51d44285255 Mon Sep 17 00:00:00 2001
From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com>
Date: Mon, 6 Jan 2025 17:41:14 +0000
Subject: [PATCH] for example
---
docs/data/toolpad/core/integrations/react-router.md | 10 +++++-----
1 file changed, 5 insertions(+), 5 deletions(-)
diff --git a/docs/data/toolpad/core/integrations/react-router.md b/docs/data/toolpad/core/integrations/react-router.md
index 2d6527fc906..0ba513f938e 100644
--- a/docs/data/toolpad/core/integrations/react-router.md
+++ b/docs/data/toolpad/core/integrations/react-router.md
@@ -8,7 +8,7 @@ title: React Router - Integration
## Wrap all your pages in a `ReactRouterAppProvider`
-In your router configuration (e.g. `src/main.tsx`), use a shared component or element (e.g. `src/App.tsx`) as a root **layout route** that wraps the whole application with the `ReactRouterAppProvider` from `@toolpad/core/react-router`.
+In your router configuration (for example `src/main.tsx`), use a shared component or element (for example `src/App.tsx`) as a root **layout route** that wraps the whole application with the `ReactRouterAppProvider` from `@toolpad/core/react-router`.
You must use the `` component from `react-router` in this root layout element or component.
@@ -72,7 +72,7 @@ export default function App() {
## Create a dashboard layout
-Create a layout file for your dashboard pages (e.g. `src/layouts/dashboard.tsx`), to also be used as a layout route with the `` component from `react-router`:
+Create a layout file for your dashboard pages (for example `src/layouts/dashboard.tsx`), to also be used as a layout route with the `` component from `react-router`:
```tsx title="src/layouts/dashboard.tsx"
import * as React from 'react';
@@ -93,7 +93,7 @@ export default function Layout() {
The [`DashboardLayout`](/toolpad/core/react-dashboard-layout/) component provides a consistent layout for your dashboard pages, including a sidebar, navigation, and header. The [`PageContainer`](/toolpad/core/react-page-container/) component is used to wrap the page content, and provides breadcrumbs for navigation.
-You can then add this layout component to your React Router configuration (e.g. `src/main.tsx`), as a child of the root layout route created above.
+You can then add this layout component to your React Router configuration (for example `src/main.tsx`), as a child of the root layout route created above.
```tsx title="src/main.tsx"
import Layout from './layouts/dashboard';
@@ -115,7 +115,7 @@ const router = createBrowserRouter([
## Create pages
-Create a dashboard page (e.g. `src/pages/index.tsx`) and an orders page (`src/pages/orders.tsx`).
+Create a dashboard page (for example `src/pages/index.tsx`) and an orders page (`src/pages/orders.tsx`).
```tsx title="src/pages/index.tsx"
import * as React from 'react';
@@ -135,7 +135,7 @@ export default function OrdersPage() {
}
```
-You can then add these page components as routes to your React Router configuration (e.g. `src/main.tsx`). By adding them as children of the layout route created above, they are automatically wrapped with that dashboard layout:
+You can then add these page components as routes to your React Router configuration (for example `src/main.tsx`). By adding them as children of the layout route created above, they are automatically wrapped with that dashboard layout:
```tsx title="src/main.tsx"
import DashboardPage from './pages';