You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
| `children` | Optional * | `ReactNode` | | The components rendering the record fields
65
+
| `render` | Optional * | `(showContext) => ReactNode` | | A function rendering the record fields, receive the show context as its argument
66
+
| `authLoading` | Optional | `ReactNode` | | The component to render while checking for authentication and permissions
67
+
| `actions` | Optional | `ReactElement` | | The actions to display in the toolbar
68
+
| `aside` | Optional | `ReactElement` | | The component to display on the side of the list
69
+
| `className` | Optional | `string` | | passed to the root component
70
+
| `component` | Optional | `Component` | `Card` | The component to render as the root element
71
+
| `disable Authentication` | Optional | `boolean` | | Set to `true` to disable the authentication check
72
+
| `empty WhileLoading` | Optional | `boolean` | | Set to `true` to return `null` while the show is loading
73
+
| `error` | Optional | `ReactNode` | | The component to render when failing to load the record
74
+
| `id` | Optional | `string \| number` | | The record id. If not provided, it will be deduced from the URL
75
+
| `loading` | Optional | `ReactNode` | | The component to render while loading the record to show
76
+
| `offline` | Optional | `ReactNode` | | The component to render when there is no connectivity and the record isn't in the cache
77
+
| `queryOptions` | Optional | `object` | | The options to pass to the `useQuery` hook
78
+
| `redirectOnError` | Optional | `'list' \| false \| function` | `'list'` | The page to redirect to when an error occurs
79
+
| `resource` | Optional | `string` | | The resource name, e.g. `posts`
80
+
| `sx` | Optional | `object` | | Override or extend the styles applied to the component
81
+
| `title` | Optional | `string \| ReactElement \| false` | | The title to display in the App Bar
78
82
79
83
`*` You must provide either `children` or `render`.
80
84
@@ -147,6 +151,20 @@ const Aside = () => {
147
151
148
152
**Tip**: Always test the record is defined before using it, as react-admin starts rendering the UI before the `dataProvider.getOne()` call is over.
149
153
154
+
## `authLoading`
155
+
156
+
By default, `<Show>` renders the children while checking for authentication and permissions. You can display a component during this time via the `authLoading` prop:
157
+
158
+
```jsx
159
+
import { Show } from'react-admin';
160
+
161
+
exportconstPostShow= () => (
162
+
<Show authLoading={<p>Checking for permissions...</p>}>
163
+
...
164
+
</Show>
165
+
);
166
+
```
167
+
150
168
## `children`
151
169
152
170
`<Show>` doesn't render any field by default - it delegates this to its children, called "Show layout components". These components read the `record` from the [`RecordContext`](./useRecordContext.md) and render its fields.
@@ -274,6 +292,20 @@ const BookShow = () => (
274
292
);
275
293
```
276
294
295
+
## `error`
296
+
297
+
By default, `<Show>` redirects to the list when an error happens while loading the record to show. You can render an error component via the `error` prop:
298
+
299
+
```jsx
300
+
import { Show } from'react-admin';
301
+
302
+
exportconstPostShow= () => (
303
+
<Show error={<p>Something went wrong while loading your post!</p>}>
304
+
...
305
+
</Show>
306
+
);
307
+
```
308
+
277
309
## `id`
278
310
279
311
By default, `<Show>` deduces the identifier of the record to show from the URL path. So under the `/posts/123/show` path, the `id` prop will be `123`. You may want to force a different identifier. In this case, pass a custom `id` prop.
**Tip**: Pass both a custom `id` and a custom `resource` prop to use `<Show>` independently of the current URL. This even allows you to use more than one `<Show>` component in the same page.
292
324
325
+
## `loading`
326
+
327
+
By default, `<Show>` renders the children while loading the record to show. You can display a component during this time via the `loading` prop:
328
+
329
+
```jsx
330
+
import { Show } from'react-admin';
331
+
332
+
exportconstPostShow= () => (
333
+
<Show loading={<p>Loading the post...</p>}>
334
+
...
335
+
</Show>
336
+
);
337
+
```
338
+
293
339
## `offline`
294
340
295
341
By default, `<Show>` renders the `<Offline>` component when there is no connectivity and the record hasn't been cached yet. You can provide your own component via the `offline` prop:
@@ -385,6 +431,24 @@ The default `onError` function is:
385
431
}
386
432
```
387
433
434
+
## `redirectOnError`
435
+
436
+
By default, `<Show>` redirects to the list when an error happens while loading the record to show. You can change the default redirection by setting the `redirectOnError` prop:
437
+
438
+
-`'list'`: redirect to the List view (the default)
439
+
-`false`: do not redirect
440
+
- A function `(resource, id) => string` to redirect to different targets depending on the record
441
+
442
+
```jsx
443
+
import { Show } from'react-admin';
444
+
445
+
exportconstPostShow= () => (
446
+
<Show redirectOnError={false}>
447
+
...
448
+
</Show>
449
+
);
450
+
```
451
+
388
452
## `render`
389
453
390
454
Instead of passing a `children` prop, you can pass a `render` prop, which is a function that receives the [`ShowContext`](./useShowContext.md#return-value) as an argument and returns the React element to render. This allows you to access the `record`, `isPending`, and other properties from the `showContext`.
| `authLoading` | Optional | `ReactNode` | | The component to render while checking for authentication and permissions
66
-
| `children` | Optional | `ReactNode` | | The components rendering the record fields
67
-
| `render` | Optional | `(props: ShowControllerResult<RecordType>) => ReactNode` | | Alternative to children, a function that takes the ShowController context and renders the form
68
-
| `disable Authentication` | Optional | `boolean` | | Set to `true` to disable the authentication check
69
-
| `id` | Optional | `string` | | The record identifier. If not provided, it will be deduced from the URL
70
-
| `offline` | Optional | `ReactNode` | | The component to render when there is no connectivity and the record isn't in the cache
71
-
| `queryOptions` | Optional | `object` | | The options to pass to the `useQuery` hook
72
-
| `resource` | Optional | `string` | | The resource name, e.g. `posts`
| `authLoading` | Optional | `ReactNode` | | The component to render while checking for authentication and permissions
66
+
| `children` | Optional | `ReactNode` | | The components rendering the record fields
67
+
| `render` | Optional | `(props: ShowControllerResult<RecordType>) => ReactNode` | | Alternative to children, a function that takes the ShowController context and renders the form
68
+
| `disable Authentication` | Optional | `boolean` | | Set to `true` to disable the authentication check
69
+
| `error` | Optional | `ReactNode` | | The component to render when failing to load the record
70
+
| `id` | Optional | `string` | | The record identifier. If not provided, it will be deduced from the URL
71
+
| `loading` | Optional | `ReactNode` | | The component to render while loading the record to show
72
+
| `offline` | Optional | `ReactNode` | | The component to render when there is no connectivity and the record isn't in the cache
73
+
| `queryOptions` | Optional | `object` | | The options to pass to the `useQuery` hook
74
+
| `redirectOnError` | Optional | `'list' \| false \| function` | `'list'` | The page to redirect to when an error occurs
75
+
| `resource` | Optional | `string` | | The resource name, e.g. `posts`
73
76
74
77
## `authLoading`
75
78
76
-
By default, `<ShowBase>` renders nothing while checking for authentication and permissions. You can provide your own component via the `authLoading` prop:
79
+
By default, `<ShowBase>` renders the children while checking for authentication and permissions. You can display a component during this time via the `authLoading` prop:
77
80
78
81
```jsx
79
82
import { ShowBase } from'react-admin';
@@ -136,6 +139,20 @@ const PostShow = () => (
136
139
);
137
140
```
138
141
142
+
## `error`
143
+
144
+
By default, `<ShowBase>` redirects to the list when an error happens while loading the record to show. You can render an error component via the `error` prop:
145
+
146
+
```jsx
147
+
import { ShowBase } from'react-admin';
148
+
149
+
exportconstPostShow= () => (
150
+
<ShowBase error={<p>Something went wrong while loading your post!</p>}>
151
+
...
152
+
</ShowBase>
153
+
);
154
+
```
155
+
139
156
## `id`
140
157
141
158
By default, `<ShowBase>` deduces the identifier of the record to show from the URL path. So under the `/posts/123/show` path, the `id` prop will be `123`. You may want to force a different identifier. In this case, pass a custom `id` prop.
By default, `<ShowBase>` renders the children while loading the record to show. You can display a component during this time via the `loading` prop:
173
+
174
+
```jsx
175
+
import { ShowBase } from'react-admin';
176
+
177
+
exportconstPostShow= () => (
178
+
<ShowBase loading={<p>Loading the post...</p>}>
179
+
...
180
+
</ShowBase>
181
+
);
182
+
```
183
+
153
184
**Tip**: Pass both a custom `id` and a custom `resource` prop to use `<ShowBase>` independently of the current URL. This even allows you to use more than one `<ShowBase>` component in the same page.
154
185
155
186
## `offline`
@@ -226,6 +257,24 @@ The default `onError` function is:
226
257
}
227
258
```
228
259
260
+
## `redirectOnError`
261
+
262
+
By default, `<ShowBase>` redirects to the list when an error happens while loading the record to show. You can change the default redirection by setting the `redirectOnError` prop:
263
+
264
+
-`'list'`: redirect to the List view (the default)
265
+
-`false`: do not redirect
266
+
- A function `(resource, id) => string` to redirect to different targets depending on the record
267
+
268
+
```jsx
269
+
import { ShowBase } from'react-admin';
270
+
271
+
exportconstPostShow= () => (
272
+
<ShowBase redirectOnError={false}>
273
+
...
274
+
</ShowBase>
275
+
);
276
+
```
277
+
229
278
## `render`
230
279
231
280
Alternatively, you can pass a `render` function prop instead of children. This function will receive the `ShowContext` as argument.
0 commit comments