Я не могу передать параметр в ссылку на функцию

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