没有react钩子的react中的URL参数

Question

在App.js中我有这个路由

<Route exact path='/questions/:questionId'>
<Details />
</Route>

在HomeListItem.js中有这个链接

<button className='view-poll'>
<Link to={`/questions/${questionId}`}>
View poll
</Link>

在Details.js中我想访问questionId，
我尝试这样做…

const { questionId } = this.props.match.params;

但是我在浏览器中出现了这个错误TypeError:不能设置未定义的属性(设置'props')

我在Details.js中使用了withouter，它是一个类组件，

import { BrowserRouter as withRouter } from 'react-router-dom';  
...
export default withRouter(connect(mapStateToProps)(Details));

Answer 1

BrowserRouter和withRouter是完全不同的东西。BrowserRouter是一个react组件，充当上下文提供程序。withRouter是一个函数，它将matchprop附加到您从最接近的父BrowserRouter中给它的组件。

现在你正在导入BrowserRouter作为withRouter:

import { BrowserRouter as withRouter } from 'react-router-dom';  

需要导入withRouter包装器本身:

import { withRouter } from 'react-router-dom';  

下面是CodeSandbox上的一个示例，其中">Test.js";文件类似于">Details.js";文件。