React-router - Как передавать данные между страницами в React?

Question

Я работаю над проектом, в котором мне нужно передавать данные с одной страницы на другую. Например, у меня есть data на первой странице.

let data = [
  {id:1, name:'Ford', color:'Red'},
  {id:2, name:'Hyundai', color:'Blue'}
]

Вот первая страница компонента, где я отображаю этот список данных с именем.

class ListDetail extends Component {
    constructor();
    handleClick(data){
    console.log(data);
  }
  render() {
    return (
      <div>
        <Hello name={this.state.name} />
        <ul>
          {data.map((data,i) => {
            return <li onClick={this.handleClick.bind(this,data)}>{data.name}</li>
          })}
        </ul>
      </div>
    );
  }
}

Я хочу передать эти данные на следующую страницу, где мне нужны эти данные и больше данных, чем эта. Я использую React Router 4. Любые предложения или помощь будут полезны.

Answer 1

Вы можете использовать компонент Link реагирующего маршрутизатора и выполнять следующие действия:

<Link to={{
  pathname: '/yourPage',
  state: [{id: 1, name: 'Ford', color: 'red'}]
}}> Your Page </Link>

, а затем получить доступ к данным с помощью this.props.location.state

Вы также можете рассмотреть возможность использования избыточности для управления состоянием во всем приложении (https://redux.js.org/).

Answer 2

Предполагая, что ваша вторая страница является компонентом, вы можете передать данные в виде реквизита, который будет доступен на следующей странице.Однако следует отметить, что вы должны использовать компонент <Link />, который доступен в react-router 4, а не <a></a>, который вызывает перезагрузку полной страницы и, следовательно, делает доступ к потерянным данным.

Answer 3

Вы можете использовать компонент Link из реактивного маршрутизатора и указать to={} в качестве объекта, в котором вы указываете путь к маршруту.Затем добавьте переменную, например data, для хранения значения, которое вы хотите передать.См. Пример ниже.

Использование компонента <Link />:

<Link
  to={{
    pathname: "/page",
    data: data // your data array of objects
  }}
>

Использование history.push()

this.props.history.push({
  pathname: '/page',
  data: data // your data array of objects
})

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

render() {
  const { data } = this.props.location
  return (
    // render logic here
  )
}

Вы можете увидеть пример того, как передать значение вместе с маршрутом, в другом примере здесь .

Дополнительную информацию из документов React Router можно получитьсм. ниже:
Компонент ссылки
объект истории

Инструменты управления состоянием.

Когда выпередают много данных / реквизита другим компонентам / страницам.Вы можете рассмотреть возможность использования библиотеки для управления вашим состоянием.Два популярных из них: Redux и MobX .