React-router - как передавать данные между страницами в React?
Я работаю над проектом, в котором мне нужно передавать данные с одной страницы на другую.
Например, у меня на первой странице стоит data.
let data = [
{id:1, name:'Ford', color:'Red'},
{id:2, name:'Hyundai', color:'Blue'}
]
Вот первая страница компонента, на которой я визуализирую этот список данных с именем.
class ListDetail extends Component {
constructor();
handleClick(data){
console.info(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. Любые предложения или помощь были бы полезны.
Эндрю, альтернатива моему ответу, вы также можете использовать React Context API для передачи данных между компонентами, когда они находятся глубже по дереву. Это вариант, но если вы работаете с большими объемами данных. Я бы посоветовал взглянуть на Redux, как предложил Duhaime. Это немного требует обучения, но бесплатный курс по Redux на egghead.io подготовит вас к этому. Курс подготовлен Дэном, создателем redux.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 5
Вы можете использовать компонент Link из response-router и указать to = {} в качестве объекта, где вы указываете путь в качестве маршрута для перехода. Затем добавьте переменную, например. data для хранения значения, которое вы хотите передать. См. Пример ниже.
Используя компонент <Link />:
<Link
to = {{
pathname: "/page",
state: data // your data array of objects
}}
>
Использование history.push()
this.props.history.push({
pathname: '/page',
state: data // your data array of objects
})
Используя любой из вышеперечисленных вариантов, вы теперь можете получить доступ к data в объекте местоположения, как показано ниже в вашем компоненте страницы.
render() {
const { state } = this.props.location
return (
// render logic here
)
}
Вы можете увидеть пример того, как передать значение вместе с маршрутом, в другом примере здесь.
Также необходимо убедиться, что маршрут проходит через подпорки во время разводки. <Точный путь маршрута = "/ path" component = {(props) => <View {... props} />} />
Вы предложили Redux, но насколько я понимаю, Redux не сохраняет значения при переключении URL-адресов, это правильно?
Привет, @YuvalLevy, в контексте одностраничного приложения для реагирования и использования маршрутизатора реакции для управления маршрутизацией во внешнем интерфейсе redux управляет состоянием отдельно от маршрутов. Итак, независимо от маршрута, вам доступно состояние в redux. Конечно, если вы переходите на другой сайт вне своего приложения, это что-то еще.
Вы также захотите encodeURIComponent передаваемые параметры и decodeURIComponent в приемнике для props.match.params. <variablename> в противном случае, если в параметре, который вы хотите передать, есть косые черты, React не будет вызывать конструктор с props и не будет объявлять какие-либо ошибки или вывод на консоль, оставляя вас в догадках.
Как получить доступ к данным в компоненте страницы?
Вы можете использовать компонент Link реактивного маршрутизатора и сделать следующее:
<Link to = {{
pathname: '/yourPage',
state: [{id: 1, name: 'Ford', color: 'red'}]
}}> Your Page </Link>
а затем получить доступ к данным с помощью this.props.location.state
Вы также можете рассмотреть возможность использования redux для управления состоянием всего вашего приложения (https://redux.js.org/).
Можем ли мы передать функцию?
Предполагая, что ваша другая страница является компонентом, вы можете передать данные как опору, которая будет доступна на следующей странице. Однако следует отметить, что вы должны использовать компонент <Link />, который доступен в react-router 4, в отличие от использования <a></a>, который вызывает полную перезагрузку страницы, что приводит к потере доступа к данным.
Если вы хотите отправить одну страницу в одном объекте с таким же кодом ниже, вы должны импортировать свою страницу в свой объектный файл и снова импортировать свою страницу в целевой файл так же:
import Home from './componenets/home/home';
import ColdDrink from './componenets/coldDrink/coldDrink';
import HotDrink from './componenets/hotDrink/hotDrink';
import CheaseCake from './componenets/cheaseCake/cheaseCake';
import Lost from './componenets/404/lost';
const link = [
{
name : "Cold Drink",
link : "/ColdDrink",
router : <ColdDrink/>
},
{
name : "Hot Drink",
link : "/HotDrink",
router : <HotDrink/>
},
{
name : "chease Cake",
link : "/CheaseCake",
router : <CheaseCake/>
},
{
name : "Home",
link : "/",
router : <Home/>
},
{
name : "",
link : "",
router : <Lost/>
}
];
и в вашем файле назначения вы должны сопоставить свой объект ...
const links = (this.props.link);
{links.map((item, i) => (
{item.router}
))}
как передать данные в другой компонентный маршрутизатор в reactjs
Login.jsx
handleClickSignIn(){
console.info("come handle click fun");
this.props.history.push( {pathname: "/welcome",
state: { employee:"Steven" }});
}
welcome.jsx
componentDidMount()
{
console.info(this.props.location.state.employee);
}
@ Андрей, есть много способов сделать это. Используете ли вы какую-либо систему управления состоянием, такую как Redux? Если это так, эти данные должны храниться в вашем хранилище Redux, где они будут доступны для всех маршрутов. Если нет, я бы порекомендовал это сделать - это займет немного времени, чтобы научиться, но сделает вашу жизнь намного проще, когда вы научитесь веревкам ...