TypeError: (0 , _reactRouterDom.useParams) is not a function

Question

when I am using this code to get id from url path(http://127.0.0.1:8083/#/zhuolian/activity/detail/1):

import { useParams } from "react-router-dom";


  handleSearchInfo = () => {
    const {id} = useParams();

    const { dispatch } = this.props;
    dispatch({
      type: 'activityM/getActivityDetail',
      payload: { pageSize: 10, pageNum: 1 ,id: id},
    });
  };

shows error like this:

TypeError: (0 , _reactRouterDom.useParams) is not a function
TableList._this.handleSearchInfo
src/pages/xRepo/Activity/detail.js:166
  163 |   }
  164 | ];
  165 | 
> 166 | handleSearchInfo = () => {
      | ^  167 |   const {id} = useParams();
  168 | 
  169 |   const { dispatch } = this.props;
View compiled
TableList.componentDidMount
src/pages/xRepo/Activity/detail.js:76
  73 |   dispatch({
  74 |     type: 'activityM/clear',
  75 |   });
> 76 |   this.handleSearchInfo();
     | ^  77 | 
  78 | }
  79 | 
View compiled
▶ 16 stack frames were collapsed.
(anonymous function)
node_modules/dva/lib/dynamic.js:91
  88 | var AsyncComponent = m.default || m;
  89 | 
  90 | if (_this2.mounted) {
> 91 |   _this2.setState({
     | ^  92 |     AsyncComponent: AsyncComponent
  93 |   });
  94 | } else {
View compiled

what should I do to avoid this problem? my react router version is "react-router-dom": "^4.3.1"

Jeremy Thompson · Accepted Answer · 2023-10-10 09:14:24Z

7

react-router-dom added useParams, useLocation, useHistory, and useRouteMatch hooks at version v5.1.0

About how to get the URL parameters using react-router v4, See How to get parameter value from query string?

Edit/Example:

BAD:

import React, { useState, useParams } from "react";
import { useNavigate } from 'react-router-dom';

GOOD:

import React, { useState } from "react";
import { useNavigate, useParams } from 'react-router-dom';

edited Oct 10, 2023 at 9:14

Jeremy Thompson

66.3k38 gold badges225 silver badges344 bronze badges

answered Oct 29, 2021 at 9:51

Lin Du

104k138 gold badges340 silver badges575 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

aprilmintacpineda Over a year ago

I'm on v6, I still get this error WebpackError: TypeError: (0 , dist.useParams) is not a function. The code just import { useParams } from 'react-router-dom';.

Lin Du Over a year ago

@aprilmintacpineda Can you provide a stackoverflow.com/help/minimal-reproducible-example? And if you think your question is different, you should ask a new question.

Collectives™ on Stack Overflow

TypeError: (0 , _reactRouterDom.useParams) is not a function

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related