diff --git a/packages/ra-ui-materialui/src/detail/Tab.tsx b/packages/ra-ui-materialui/src/detail/Tab.tsx
index d24ece1ca1e..0f231a3c474 100644
--- a/packages/ra-ui-materialui/src/detail/Tab.tsx
+++ b/packages/ra-ui-materialui/src/detail/Tab.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import { isValidElement, ReactElement, ReactNode } from 'react';
import PropTypes from 'prop-types';
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation, useResolvedPath } from 'react-router-dom';
import { Tab as MuiTab, TabProps as MuiTabProps, Stack } from '@mui/material';
import { ResponsiveStyleValue } from '@mui/system';
import { useTranslate, RaRecord } from 'ra-core';
@@ -71,9 +71,10 @@ export const Tab = ({
}: TabProps) => {
const translate = useTranslate();
const location = useLocation();
+ const resolvedPath = useResolvedPath('..');
const propsForLink = {
component: Link,
- to: { ...location, pathname: value },
+ to: { ...location, pathname: `${resolvedPath.pathname}/${value}` },
};
const renderHeader = () => {
diff --git a/packages/ra-ui-materialui/src/detail/TabbedShowLayout.stories.tsx b/packages/ra-ui-materialui/src/detail/TabbedShowLayout.stories.tsx
index bcef7257a6c..2fbad8cdd19 100644
--- a/packages/ra-ui-materialui/src/detail/TabbedShowLayout.stories.tsx
+++ b/packages/ra-ui-materialui/src/detail/TabbedShowLayout.stories.tsx
@@ -1,14 +1,16 @@
-import * as React from 'react';
-import { MemoryRouter } from 'react-router-dom';
import { Divider as MuiDivider } from '@mui/material';
import {
- RecordContextProvider,
- ResourceContext,
- useRecordContext,
+ ResourceContextProvider,
WithRecord,
+ testDataProvider,
+ useRecordContext,
} from 'ra-core';
+import * as React from 'react';
+import { Navigate, Route, Routes } from 'react-router-dom';
+import { AdminContext } from '../AdminContext';
import { Labeled } from '../Labeled';
-import { TextField, NumberField } from '../field';
+import { Show } from '../detail';
+import { NumberField, TextField } from '../field';
import { TabbedShowLayout } from './TabbedShowLayout';
export default { title: 'ra-ui-materialui/detail/TabbedShowLayout' };
@@ -22,47 +24,69 @@ const record = {
year: 1869,
};
+const Wrapper = ({ children }) => (
+ options?._ ?? x,
+ changeLocale: () => Promise.resolve(),
+ getLocale: () => 'en',
+ }}
+ dataProvider={testDataProvider({
+ getOne: () => Promise.resolve({ data: record }),
+ })}
+ >
+
+
+
+ {children}
+
+
+ }
+ />
+ }
+ />
+
+
+);
+
export const Basic = () => (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
);
export const Count = () => (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
const BookTitle = () => {
@@ -71,98 +95,92 @@ const BookTitle = () => {
};
export const CustomChild = () => (
-
-
-
-
-
-
- {record.author}}
- />
-
-
-
-
-
+
+
+
+
+ {record.author}} />
+
+
+
);
export const CustomLabel = () => (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
);
export const Spacing = () => (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
);
export const Divider = () => (
-
-
-
- }>
-
-
-
-
-
-
-
-
-
-
-
+
+ }>
+
+
+
+
+
+
+
+
+
);
export const SX = () => (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+);
+
+export const WithPath = () => (
+
+
+
+
+
+
+
+
+
+
+
+
+
);
diff --git a/packages/ra-ui-materialui/src/form/FormTabHeader.tsx b/packages/ra-ui-materialui/src/form/FormTabHeader.tsx
index a3a04b538b5..2d72f9f1229 100644
--- a/packages/ra-ui-materialui/src/form/FormTabHeader.tsx
+++ b/packages/ra-ui-materialui/src/form/FormTabHeader.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
import { ReactElement, ReactNode } from 'react';
import { isElement } from 'react-is';
import PropTypes from 'prop-types';
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation, useResolvedPath } from 'react-router-dom';
import { Tab as MuiTab, TabProps as MuiTabProps } from '@mui/material';
import clsx from 'clsx';
import { useTranslate, useFormGroup } from 'ra-core';
@@ -22,12 +22,13 @@ export const FormTabHeader = ({
}: FormTabHeaderProps): ReactElement => {
const translate = useTranslate();
const location = useLocation();
+ const resolvedPath = useResolvedPath('..');
const { isSubmitted } = useFormState();
const formGroup = useFormGroup(value.toString());
const propsForLink = {
component: Link,
- to: { ...location, pathname: value },
+ to: { ...location, pathname: `${resolvedPath.pathname}/${value}` },
};
let tabLabel = isElement(label) ? label : translate(label, { _: label });
diff --git a/packages/ra-ui-materialui/src/form/TabbedForm.stories.tsx b/packages/ra-ui-materialui/src/form/TabbedForm.stories.tsx
index 95085cb09c9..e68dd98056a 100644
--- a/packages/ra-ui-materialui/src/form/TabbedForm.stories.tsx
+++ b/packages/ra-ui-materialui/src/form/TabbedForm.stories.tsx
@@ -6,6 +6,7 @@ import { Edit } from '../detail';
import { NumberInput, TextInput } from '../input';
import { TabbedForm } from './TabbedForm';
import { Stack } from '@mui/material';
+import { Navigate, Route, Routes } from 'react-router-dom';
export default { title: 'ra-ui-materialui/forms/TabbedForm' };
@@ -29,11 +30,22 @@ const Wrapper = ({ children }) => (
getOne: () => Promise.resolve({ data }),
})}
>
-
-
- {children}
-
-
+
+
+
+ {children}
+
+
+ }
+ />
+ }
+ />
+
);
@@ -104,3 +116,18 @@ export const Count = () => (
);
+
+export const WithPath = () => (
+
+
+
+
+
+
+
+
+
+
+
+
+);
diff --git a/packages/ra-ui-materialui/src/form/TabbedFormView.tsx b/packages/ra-ui-materialui/src/form/TabbedFormView.tsx
index ff1cb381e88..15e2e72fa8c 100644
--- a/packages/ra-ui-materialui/src/form/TabbedFormView.tsx
+++ b/packages/ra-ui-materialui/src/form/TabbedFormView.tsx
@@ -36,7 +36,7 @@ export const TabbedFormView = (props: TabbedFormViewProps): ReactElement => {
...rest
} = props;
const location = useLocation();
- const resolvedPath = useResolvedPath('');
+ const resolvedPath = useResolvedPath('.');
const resource = useResourceContext(props);
const [tabValue, setTabValue] = useState(0);