Передача данных от одного маршрутизатора (компонента) к другому

Question

Попытка передать данные из <Route exact path="/" render={()=><Home addToCart={(book)=>{addToCart(book)}}/>}></Route> в <Route path="/cart" render={()=><Cart addToCart={cartItem}/>}></Route>

Проблема:

1. Корзина (render={()=><Cart addToCart={cartItem}/>) получает ноль, но не объект, который я пытаюсь отправить

Поместите 'console.log ...', чтобы помочь с отладкой, посмотрите код

import React from 'react';
import classes from './Nav.module.css';
import { Route, NavLink, Switch } from 'react-router-dom';
import Home from '../Home/Home';
import Cart from '../Cart/Cart';

var cartItem = null;

let addToCart = (book)=>{
  cartItem = book;
  console.log('1. Displays the correct object', cartItem);
}
const nav = ()=>{
  return (
    <div>
      <div className={classes.MenuContainer}>
        <div className={classes.Menu}>
          <div><NavLink to="/">Home</NavLink></div>
          <div><NavLink to="/cart">Cart</NavLink></div>
        </div>
      </div>
      <Switch>
        <Route exact path="/" render={()=><Home addToCart={(book)=>{addToCart(book)}}/>}></Route>
        <Route path="/cart" render={()=><Cart addToCart={cartItem}/>}></Route>
        {console.log('2. Displays null', cartItem)}
      </Switch>
    </div>
  );
} 

export default nav;

Answer 1

Redux был бы отличным решением, как упомянуто выше.

Другой вариант заключается в том, чтобы родительский компонент управлял состоянием, а затем передавал состояние обоим своим дочерним элементам.

Answer 2

Вам нужно использовать что-то вроде redux , если вы хотите передавать данные между компонентами React одного уровня.