как передать реквизит через

#reactjs #react-router

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

Вопрос:

Я пытаюсь передать реквизит через тег ‘Link’, поэтому я реализовал его таким образом:

  <ul className="list-group mb-4">
{posts.map(post=>(<li key={post.name} className="list-group-item">{post.name}<Row style={{paddingLeft:800}}><Col><Link to={{
                            pathname: '/starship', aboutProps: {
                              name:post.name,
                            model:post.model,
                            manufacturer:post.manufacturer
                            }
                          }} ><Button  >  show more</Button></Link></Col></Row></li>))}
</ul>

затем я пытаюсь получить доступ к реквизиту через props.location.aboutProps

 <div>
        <h1>{props.location.aboutProps.name}</h1>
    </div>)}

но я получаю эту ошибку:

и здесь я попытался console.log(props), и он выдает мне пустой объект (я не знаю, почему он пустой), это объект в «starship.js:3» :

вот codesandbox, но проект там тяжелый, поэтому в настоящее время он не отображается, но вы можете увидеть весь код в нем: https://codesandbox.io/s/cocky-dijkstra-hw0qh?file=/src/Components/HomePage.js:95-120 и вы можете поиграть с нимна вашем устройстве, даже если его компоненты не отображаются

1. о чем props.aboutProps.name ?

2. лучше console.log(props) . Затем проверьте правильность пути

3. @Simone тоже не определено

4. @prasanth в каком файле / компоненте?

5. console.log где вы использовали этот {props.location.aboutProps.name} компонент кода

Ответ №1:

просто сделай это

 <Link to={{
  pathname: '/toSomeThing',
  state: {
    any: "any"
  }
}}>Hi</Link>

Каждый раз, когда вы передаете данные через свойство state, эти данные будут доступны в компоненте как свойство в props.location.state .

 const { any } = this.props.location.state

1. чем отличается мое решение?

2. Потому что есть только два способа передать данные из ссылки на новый маршрут: параметры URL и состояние. Параметры URL отлично подходят для строк, но не предназначены для любых других типов данных. Создавая ссылки для поддержки объекта, вы можете передавать любые данные, которые вам нужны, в свойстве state, и к этим данным можно получить доступ по новому маршруту в разделе props.location.state .

3. хорошо, но реквизит уже пуст, и проблема, вероятно, не в том, чтобы передать его через маршрутизатор, но его нужно правильно определить из первого компонента, вот что я думаю..

4. потому что я уже использовал синтаксис в вашем ответе, и ошибка исчезла, но она дала пустую страницу

5. Я попробовал это в своем коде, все работает как ожидалось, просто зарегистрируйте сообщение в функции map, чтобы убедиться, что есть данные

Ответ №2:

Это не работает, потому что вы не можете передать какой-либо ключ внутри объекта Согласно документации маршрутизатора react, вам нужно передавать внешние данные только с помощью ключа состояния. Так что это будет похоже

 <Link to={{
    pathname='/startship'
    state={
       aboutProps: {
          name:post.name,
          model:post.model,
          manufacturer:post.manufacturer
          }
    }
 }}
</Link>

Ответ №3:

 <Link to={{ 
  pathname: '/starship', 
  state:{
     name:post.name,
     model:post.model,
     manufacturer:post.manufacturer
  }}}>

Попробуйте это