[v6] useParams returns an empty object during testing

See original GitHub issue

Version

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:closed
  • Created 3 years ago
  • Comments:7 (1 by maintainers)

github_iconTop GitHub Comments

4reactions
andrerpenacommented, Jan 28, 2022

For those coming from Google, I had this problem when I accidentally did:

import { useParams } from “react-router”;

instead of

import { useParams } from “react-router-dom”;

4reactions
tranhaminh91commented, Nov 1, 2020

i got the same issue. What do you mean “You aren’t wrapping in a Routes”?

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found