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 piled
TableListponentDidMount
src/pages/xRepo/Activity/detail.js:76
  73 |   dispatch({
  74 |     type: 'activityM/clear',
  75 |   });
> 76 |   this.handleSearchInfo();
     | ^  77 | 
  78 | }
  79 | 
View piled
▶ 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 piled

what should I do to avoid this problem? my react router version is "react-router-dom": "^4.3.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 piled
TableList.ponentDidMount
src/pages/xRepo/Activity/detail.js:76
  73 |   dispatch({
  74 |     type: 'activityM/clear',
  75 |   });
> 76 |   this.handleSearchInfo();
     | ^  77 | 
  78 | }
  79 | 
View piled
▶ 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 piled

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

• javascript
• reactjs
• react-router-dom

1 Answer 1

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';