[v6] useParams returns an empty object during testing
See original GitHub issueVersion
6.0.0-beta.0
Steps to reproduce
I’m trying to test a component
<Route path="profile-activation/:profileToken" element={<ProfileActivation />}/>
which in turn is rendered under parent
<Route path="auth/*" element={<Auth />} />
When I’m trying to access useParams() in the tests, it returns an empty object. However, useLocation() works fine at the same time and returns an object with the relative data
Here you can see two consoles, first one has failed to log useParams(), second one succeeded with useLocation();
console.log
{}
at ProfileActivationForm (src/features/Auth/components/ProfileActivation/ProfileActivationForm/ProfileActivationForm.tsx:52:11)
console.log
{
pathname: '/auth/profile-activation/token123',
search: '',
hash: '',
state: null,
key: 'iwq4xdri'
}
at ProfileActivationForm (src/features/Auth/components/ProfileActivation/ProfileActivationForm/ProfileActivationForm.tsx:53:11)
This is my component in the tests:
<MemoryRouter initialEntries={['/auth/profile-activation/token123']}>
<Route
path="/auth/profile-activation/:profileToken"
element={<ProfileActivation />}
/>
</MemoryRouter>
Expected Behavior
useParams() returns an object with relative data, for ex. { profileToken: 'token123' }
Actual Behavior
useParams() returns an empty object
Issue Analytics
- State:
- Created 3 years ago
- Comments:7 (1 by maintainers)
Top Results From Across the Web
[v6] useParams returns an empty object during testing #7504
When I'm trying to access useParams() in the tests, it returns an empty object. However, useLocation() works fine at the same time and ......
Read more >react router use params returns empty object - Stack Overflow
Issue. After scouring your repo looking for the usual suspect causes for "it does not navigate only the URL changes" I didn't find...
Read more >Main Concepts v6.6.1 - React Router
Location - This is a React Router specific object that is based on the built-in browser's window.location object. It represents "where the user...
Read more >[Solved]-react router use params returns empty object-Reactjs
What I believe to be occurring here is the exact and path props aren't passed to the underlying Route component and so the...
Read more >Cleaner components with React Router Hooks - LogRocket Blog
The useParams Hook will return an object of key/value pairs from your application URL that is set to be dynamic. In a complex...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
For those coming from Google, I had this problem when I accidentally did:
instead of
i got the same issue. What do you mean “You aren’t wrapping in a Routes”?