добро пожаловать в мир React.Бьюсь об заклад, вам понравится, когда вы постепенно познакомитесь с классными вещами, которые вы можете сделать с React.Просто будьте терпеливы и продолжайте практиковать.
Итак, первое, что я хотел бы сделать, это то, что, как и любая другая среда javascript, React также развивается очень быстро.Таким образом, хотя основные принципы одинаковы, когда вы, с одной стороны, следите за новой статьей, с другой стороны, вы можете проверить, соответствуют ли продемонстрированные библиотеки или методологии современным требованиям.
Закрепите свои пояса, и давайте сделаембыстрый обзор на основе вашего вопроса и библиотек, которые, как я вижу, вы использовали в своем примере.
С точки зрения маршрутизатора, я вижу, что вы напрямую экспортируете вещи из react-router Когда мы проверяем страницу npm ()https://www.npmjs.com/package/react-router) реагирующего маршрутизатора делают следующее предложение
Если вы пишете приложение, которое будет работать в браузере, вам следует вместо этого установить response-router-dom
Что представляет собой следующий пакет https://www.npmjs.com/package/react-router-dom Вы можете получить более подробную информацию и найти больше руководств, чтобы улучшить свои навыки, проверив их официальную страницу https://reacttraining.com/react-router/web/guides/philosophy
Давайте посмотрим на фрагмент кодаСаша Романов при условии, что он основан на синтаксисе react-router-dom
с react-router-dom при определении маршрута со следующим синтаксисом
<Route path="/" component={HomePage} exact />
react-router-dom автоматически передает match, location и history реквизиты компоненту HomePage.Таким образом, когда вы console.log() эти реквизиты, вы сможете отображать что-то на своей консоли.И когда у вас есть доступ к history реквизиту, вместо browserHistory, вы можете использовать this.props.history.push("/some-route") для перенаправлений.
Давайте рассмотрим часть, относящуюся к withRouter.В приведенном выше примере мы могли бы использовать history, поскольку компонент HomePage был передан непосредственно в компонент Router, который мы извлекаем из react-router-dom.Однако в реальной жизни могут быть случаи, когда вы хотите использовать history реквизиты в компоненте, который не передан в Router, а, скажем, просто многократно используемый компонент кнопки.Для этих случаев react-router-dom предоставляет компонент высшего порядка, называемый withRouter
Компонент более высокого порядка (из официальной документации React) https://reactjs.org/docs/higher-order-components.html
Конкретно, более высокийКомпонент order - это функция, которая принимает компонент и возвращает новый компонент.
Таким образом, в принципе, всякий раз, когда вы оборачиваете любой компонент с помощью withRouter, например export default withRouter(MyWrappedReusableComponent), в вашем повторно используемом компоненте вы будете иметьдоступ к реквизиту history, location, pathname
Тем не менее, мое первое впечатление о вашей проблеме, похоже, не связано с логикой маршрутизатора, а скорее обменивается данными между компонентами.
В своем первоначальном вопросе вы упомянули, что
I am trying to access data gathered from a user on one page and use it on another page
Существует несколько случаев / способов решения этой проблемы
1) Если эти два компонента совершенно не имеют значения, вы можетеиспользуйте систему управления состоянием, такую как Redux, mobx, или вы можете использовать контекстный API React https://reactjs.org/docs/context.html. ОДНАКО, поскольку вы новичок в React, я бы посоветовал не заниматься этимиGHT знать, пока вы не освоитесь с основным потоком.Потому что в какой-то момент попытки реализовать поток с большим количеством библиотек и т. Д. Довольно обременительны.Поверьте, я попробовал, когда я был новичком в React, и я был действительно близок к тому, чтобы сломать компьютер после открытия 100-й вкладки браузера, чтобы найти другой метод из другой библиотеки
2) Вы можете реализовать простой родительскийдочерние отношения для передачи данных между компонентами.Позвольте мне объяснить, что я имею в виду, используя ссылки из вашего фрагмента кода.
Я полагаю, что вы хотите обновить working, что является состоянием в вашем HomeScreen, и вы хотите передать и использовать это обновленное значение в вашемWorkReq component.
Если мы игнорируем всю логику маршрутизации и решаем обходиться без маршрутов, вам нужно сделать следующее:
import React, { Component } from 'react';
import {Button} from 'reactstrap';
import { browserHistory } from 'react-router';
import WorkReqComponent from 'path/to/WorkReqDirectory';
class HomeScreen extends Component {
constructor(props) {
super(props);
this.state = {
working: "WORKING",
};
}
render() {
return (
<div>
<WorkReqComponent working={this.state.working} />
</div>
);
}
}
Таким образом, когда вы регистрируетесь this.props.working; в вашем WorkReqComponent вы сможете отобразить данные, которые вы передали.Вы можете обозначить это как passing data from parent to child.
Я проверил статьи, которые вы перечислили.Похоже, они также объясняют передачу данных между parent to child, child to parent или between siblings.
В вашем случае то, что вам действительно нужно реализовать, можно отнести к категории between siblings
Iподготовил для вас образец с react-router-dom, чтобы продемонстрировать одну возможную структуру, которая может дать ожидаемый результат.https://codesandbox.io/s/ojp2y0xxo6
В этом примере состояние определяется внутри родительского компонента и называется App.Также логика обновления состояния также определяется внутри родительского компонента.HomeScreen и WorkReq компоненты являются потомками App, поэтому они являются братьями и сестрами.Таким образом, для передачи данных между братьями и сестрами одному из них было поручено обновить состояние родителя путем передачи логики обновления состояния этому компоненту.Другой имеет задачу отображения значения состояния родителя.
На этом этапе, поскольку вы новичок и чтобы не перегружать себя, вы можете поэкспериментировать с темой parent-child-sibling передачи данных.Как только вы освоитесь с реализацией и логикой, вы можете постепенно начать изучать контекстные интерфейсы React и Redux / mobx.
Дайте мне знать, если у вас есть какие-либо вопросы относительно предоставленного мною примера