Fix TabbedForm and TabbedShowLayout with react-router v7 #10469
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
slax57
commented
Jan 24, 2025
| @@ -35,9 +29,9 @@ export const TabbedFormView = (props: TabbedFormViewProps): ReactElement => { | |||
| ...rest | |||
| } = props; | |||
| const location = useLocation(); | |||
| const resolvedPath = useResolvedPath(''); | |||
There was a problem hiding this comment.
useResolvedPath can no longer be used with both v6 and v7. See https://reactrouter.com/en/6.28.2/hooks/use-resolved-path
|
There seems to be a bug with encoded paths... Investigating |
|
All issues fixed, back to RFR |
slax57
commented
Jan 24, 2025
Comment on lines
+49
to
+50
| const titleInput = await screen.findByLabelText('Title'); | ||
| expect(titleInput).toBeVisible(); |
There was a problem hiding this comment.
Had to add this extra check because the current test did not detect the regression 😬
slax57
commented
Jan 24, 2025
| </TestMemoryRouter> | ||
| ); | ||
|
|
||
| export const Basic = () => ( | ||
| <Wrapper> |
There was a problem hiding this comment.
I had to add a Wrapper to all stories to render the tabs in a nested route, otherwise the new implementation does not work.
djhi
approved these changes
Jan 24, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Problem
Fix #10458
React-router v7 reintroduced the change they introduced in 6.19.0, which was reverted in 6.20.1 due to it causing issues in many apps, including react-admin.
Solution
Introduce
useSplatPathBasehook, which allows to compute the splat route's base path, allowing react-admin to create absolute paths for tabs (as opposed to relative paths previously), which will work both with react-router v6 and v7.How To Test
Wrap the
<Admin>in the simple example with a<HashRouter>.Then, you can set
<HashRouter future={{ v7_relativeSplatPath: true }}>to test with the feature enabled (which is the default in v7), or set it tofalseto disable the feature.Then, use
PostEditandPostShowto confirm the tabs are working OK.Additional Checks
masterfor a bugfix, ornextfor a featureAlso, please make sure to read the contributing guidelines.