1

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"

Lin Du
  • 88,126
  • 95
  • 281
  • 483
Dolphin
  • 29,069
  • 61
  • 260
  • 539

1 Answers1

2

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?

Lin Du
  • 88,126
  • 95
  • 281
  • 483
  • 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';`. – aprilmintacpineda Jul 05 '23 at 00:39
  • @aprilmintacpineda Can you provide a https://stackoverflow.com/help/minimal-reproducible-example? And if you think your question is different, you should ask a new question. – Lin Du Jul 05 '23 at 02:07