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

Question

当我使用此代码从 url 路径获取 id 时（http://127.0.0.1:8083/#/zhuolian/activity/detail/1：

\n

import { useParams } from "react-router-dom";\n\n\n  handleSearchInfo = () => {\n    const {id} = useParams();\n\n    const { dispatch } = this.props;\n    dispatch({\n      type: 'activityM/getActivityDetail',\n      payload: { pageSize: 10, pageNum: 1 ,id: id},\n    });\n  };\n

\n

显示这样的错误：

\n

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

\n

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

\n

Answer 1

react-router-dom在v5.1.0版本中添加了useParams, useLocation, useHistory, 和useRouteMatchhooks

关于如何使用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';