Изменение состояния реакции не показывает изменения при возврате

У меня есть приложение, которое перечисляет книги на пользовательской полке, а затем на следующей странице поиска. Пользователь переходит на страницу поиска, находит заголовок и выбирает полку для заголовка, на которой нужно разместить его. Когда они вернутся на главную страницу, этот заголовок должен отображаться на нужной полке.

Функциональность заключается в том, что в объекты вносятся изменения, но когда я нажимаю кнопку «Домой» или «Назад» в браузере, изменения не отображаются, пока я не обновлю браузер.

Что мне нужно сделать, чтобы это изменение отображалось, когда пользователь переходит на домашнюю страницу?

Я поместил основную часть кода в Коды

App.js

import React, { Component } from 'react'
import ListBooks from './ListBooks'
import SearchBooks from './SearchBooks'
import * as BooksAPI from './utils/BooksAPI'
import { Route } from 'react-router-dom'

class BooksApp extends Component {

  state = {
    books: []
  }

  componentDidMount() {
    BooksAPI.getAll()
    .then((books) => {
      this.setState(() => ({
        books
      }))
    })
  }

  updateShelf = (book, shelf) => {
    const bookFromState = this.state.books.find(b => b.id === book.id);
    if (bookFromState) {
      // update existing
      bookFromState.shelf = shelf;
      this.setState(currentState => ({
        books: currentState.books
      }));
    } else {
      // add new one
      this.setState(prevState => ({
        books: prevState.books
      }));
    }
    BooksAPI.update(book, shelf);
  };

  render() {
    return (
      <div>
        <Route exact path='/' render = {() => (
          <ListBooks
          books = {this.state.books}
          onUpdateShelf = {this.updateShelf}
          />
        )} />
        <Route exact path='/search' render = {() => (
          <SearchBooks
          books = {this.state.books}
          onUpdateShelf = {this.updateShelf}
          />
        )} />
      </div>
    )
  }
}
export default BooksApp