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 path="/dta/:pid" component={this.DtaDisplay}/>

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

请参阅React Router

中的此文档

Answer 2

通过Route呈现的组件将收到Router道具。其中，您可以使用match.params.pid

访问查询参数

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

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

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

2 个答案: