на кнопку BackButton: компонент не обновляется, хотя URL-адрес изменен

Question

При нажатии на кнопку "Назад" URL-адрес изменяется, но компонент, который должен быть отображен для этого URL-адреса, не отображается. Рендеринг, похоже, заблокирован. Я использую подключенный-реагировать-маршрутизатор. До реализации подключенного реагирующего маршрутизатора кнопка «Назад» работала нормально. Я попробовал предлагаемое решение, обернув свою функцию соединения с хранилищем приращений с withRouter, но все равно не вижу результата.

index.js

const store = configureStore();

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <App />
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root'),
);

App.js

class App extends Component {
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch(getInitialBookData());
  }

  render() {
    return (
      <div>
        <Navigation /> 
      </div>
    );
  }
}

export default connect()(App);

Navigation.js

const Navigation = () => {
  return (
      <Fragment>
        <Navbar color="light" light expand="md">
          <Collapse className="navbar-collapse">
            <Nav className="ml-sm-auto navbar-nav">
              <NavItem className="p-2">
                <NavLink activeClassName="active" to="/">Dashboard</NavLink>
              </NavItem>
              <NavItem className="p-2">
                 <NavLink activeClassName="active" to="/addbook">Add Book</NavLink>
              </NavItem>
            </Nav>
          </Collapse>
        </Navbar>
        <Container className="content mt-8">
          <Switch>
            <Route exact path="/" component={Dashboard} />
            <Route exact path="/editbook/:id" component={CreateEditBookContainer} />
            <Route exact path="/addbook" component={CreateEditBookContainer} />
            <Route component={Page404} />
           </Switch>
        </Container>
      </Fragment>
  );
};

Dashboard.js

const Dashboard = ({ loading, error, success }) => {
  return (
    <Fragment>
      { error.status === true
        ? <ErrorAlert message={error.message} />
        : null }
      { success.status === true
        ? <SuccessAlert message={success.message} />
        : null }
      <Row className="mt-3">
        <h2 className="mb-5">Welcome to Dashboard</h2>
        { loading === true
          ? null
          : <BookListContainer /> }
      </Row>
    </Fragment>
  );
};

const mapStateToProps = ({fetching, errors, success}) => {
  return { 
    loading: fetching.status,
    error: errors,
    success: success,
  };
}

Dashboard.propTypes = {
  loading: PropTypes.bool.isRequired,
  error: PropTypes.object.isRequired,
  success: PropTypes.object.isRequired,
};

export default withRouter(connect(mapStateToProps)(Dashboard));

BookListContainer.js

class BookListContainer extends Component{

  state = {
    navigateToEditBook: false,
  };

  idBookToEdit = null;
  goToEditComponent = (id) => {
    this.idBookToEdit = id;
    this.setState({ navigateToEditBook: true });
  }

  render() {
    let idBookToEdit = this.idBookToEdit;
    if (this.state.navigateToEditBook === true) {
      return <Redirect push to={{ 
        pathname:`/editBook/${idBookToEdit}`,
        state: { referrer: '/', bookId: idBookToEdit }
      }} />
    }
    const { books } = this.props;
    return(
      <Row>
        { books.map((book) => {
            return ( 
            <Book
               key={book._id}
               book={book}
               handleEditBook={this.goToEditComponent}
            />
          )
        }) }
      </Row> 
    )};
};

const mapStateToProps = (props) => {
    return { 
    books: props.books.books,
    location: props.router.location,
    };
}

BookListContainer.propTypes = {
  books: PropTypes.array.isRequired,
};

export default withRouter((connect(mapStateToProps)(BookListContainer)));

CreateEditBookContainer.js

class CreateEditBookContainer extends Component {

  render() {
    const bookId = this.props.location.state
     ? this.props.location.state.bookId
     :null

    const { books, error, success } = this.props;
    let book = null;
    if(bookId){
      book = books.filter(book => book._id === bookId)
    }
    return(
      <Col sm="12" md="6" className="m-auto pt-5">
        <CreateEditBookForm 
          { ...book ? book = { ...book[0] } : null }
        />
        { error.status === true
          ? <ErrorAlert message={error.message} />
          : null }
        { success.status === true
          ? <SuccessAlert message={success.message} />
          : null }
      </Col>
    )}
}

const mapStateToProps = ({ books, errors, success }) => {
  return {
    books: books.books,
    error: errors,
    success: success,
  }
}

CreateEditBookContainer.propTypes = {
  books: PropTypes.array.isRequired,
  error: PropTypes.object.isRequired,
  success: PropTypes.object.isRequired,
};

export default withRouter(connect(mapStateToProps)(CreateEditBookContainer));

При нажатии на кнопку «Редактировать книгу» файл CreateEditBookContainer.js корректно отображается, но при нажатии кнопки «Назад» эти компоненты остаются, в то время как компонент «Панель мониторинга» должен фактически отображаться, так как он соответствует пути «/», который правильно установлен. в URL. При переходе по ссылкам Route, указанным в Navigation, все компоненты отображаются корректно. Это ТОЛЬКО терпит неудачу на кнопке назад. Спасибо за любые предложения.