reactjs - 我无法将链接中的参数传递给函数

Question

我正在使用 ReactJS 进行前端开发。我试图通过使用 : 将从链接中获得的参数发送到函数 <Route path="/dta/:pid" component={this.DtaDisplay}/> 。我无法在 DtaDisplay() 方法中使用该参数。谁能帮我？

render() {
  return (
    <BrowserRouter>      
    <div>
    {this.NavigationDta()}
    <p className="App-intro">
      <Route path="/dta/:pid" component={this.DtaDisplay}/>
      <Route path="/rrf" component={this.ReferenceRangeFactorDisplay}/>
    </p>
    <p className="App-intro">
      <Route path="/nomen" component={this.NomenDisplay}/>
    </p>
    </div>
    </BrowserRouter>
  )
}

DtaDisplay = () => {
    return <h1>{pid}</h1>
}

Answer 1

Route通过接收路由器道具呈现的组件。其中，您可以使用match.params.pid

DtaDisplay = (props) => {
    const { match: { params: { pid }}} = props;
    return <h1>{pid}</h1>
}

使用上述内容，您可以pid在其他必要的地方使用，而无需props.match.params.pid重复编写。

Answer 2

您必须使用如下参数：

<Route path="/dta/:pid" component={this.DtaDisplay}/>

DtaDisplay = ({match}) => {
    return <h1>{match.params.pid}</h1>
}

请参阅React Router中的此文档