Question

类型错误：（0，_reactRouterDom.useParams）不是一个函数

2021-10-29

8669

javascript reactjs react-router-dom

当我使用此代码从 url 路径获取 id( 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},
    });
  };

显示如下错误：

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

我应该怎么做才能避免这个问题？我的 react router 版本是 "react-router-dom": "^4.3.1"

Answer 1

react-router-dom 在 v5.1.0 版本中添加了 useParams 、 useLocation 、 useHistory 和 useRouteMatch 钩子。>

关于如何使用 react-router v4 获取 URL 参数，请参阅如何从查询中获取参数值字符串？

编辑/示例：

不好：

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

好：

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