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

#reactjs #rest #react-router

#reactjs #rest #реагировать-маршрутизатор

Вопрос:

Я работал над интерфейсом с использованием 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>
}

Ответ №1:

Вы должны использовать параметры, подобные этому:

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

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

Обратитесь к этим документам от React Router

1. Добро пожаловать! Если вы просмотрите документацию по React Router, вы найдете больше полезных рецептов. 😉

2. Как я могу сохранить значение в переменной, скажем, const value={match.params.pid}. это не работает. как я могу это решить?@ Юлио Алеман Хименес

3. Просто без использования скобок, например: const value=match.params.pid . Скобки в вашем случае предназначены только для отображения или использования значения pid в качестве отображаемого значения.

Ответ №2:

Компонент, который отображается через Route , получает реквизиты маршрутизатора. Среди них вы можете получить доступ к параметрам запроса, используя match.params.pid

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

Используя вышесказанное, вы можете использовать pid в других необходимых местах без необходимости писать props.match.params.pid повторно.