Навигационный компонент теряет реквизит. Реагировать на ошибку роутера?

В первый раз использую реагирующий маршрутизатор, и я теряю реквизиты, переданные моему навигационному компоненту после рендеринга нового маршрута. Возможно, потеря реквизита - неправильный способ объяснить это. Какая проблема на домашней странице, когда я добавляю элементы в корзину, на обновлениях навигационных карт отображается правильное количество элементов, но когда я нажимаю кнопку "Оформить заказ", они исчезают. Когда я возвращаюсь домой, значок снова отображается правильно.

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

1. Домашние работы

2. Нет товаров в корзине:

Заметки

- Компонент NavMain не добавлен в маршрут, потому что я хотел, чтобы он отображался как на странице оформления заказа, так и на домашней странице.

- между render() и кодом возврата подсчитывает количество товаров в корзине и передает номер в навигацию через реквизит, добавленный в состояние.

Я думаю, что я сделал что-то не так в приложении, чувствуя, что <.NavMain.../> должен быть в пути?

  class App Extends React.Component {
render() {
/* counts number of items in cart does not add to state */
     const arrayOfQuantities = this.state.cart.map(item => item.quantity);
     const countOfCartItems = arrayOfQuantities.reduce(
      (total, current) => (total += current)
);

return (
  <BrowserRouter>
    <div className="App">

   /** Is this the problem? **/

     <NavMain
        countOfCartItems={countOfCartItems}
        onTermSubmit={this.onTermSubmit}
        handleSearched={this.handleSearched}
        itemsInCartBoolean={this.state.cart.length > 1}
      />

      <Route
        exact
        path="/"
        render={() => (
          <React.Fragment>
            <MainCarousel />
            <WatchList
              cart={this.state.cart}                  
              addCartItem={this.handleAddCartItem}
              watchList={data.products[0].frankMuller}

            />
          </React.Fragment>
        )}
      />
      <Route
        path="/checkout" 
        render={() => <Checkout cart={this.state.cart} />} // used for pricing etc.
      />
    </div>
  </BrowserRouter>
);
}}
export default App;

Компонент Checkout ниже, я думаю, что я должен передать реквизит через это право? Это не компонент начальной загрузки Это мой компонент, который я импортировал для оформления заказа. Я постараюсь передать некоторые реквизиты. Постараюсь нажать несколько кнопок.

export default class Checkout extends Component {render() {   
return (
  <div>
    <NavMain />

      <h1 className="main-header">Checkout</h1>
      <h5 className="sub-heading">YOUR ORDER</h5>


           <OrderList
             cart={this.props.cart}
             addCartItem={this.props.addCartItem}
             removeCartItem={this.props.removeCartItem}
            />


);}}