reactjs - 在 BackButton 上：尽管 url 已更改，但组件不会更新

Question

单击后退按钮时，url 会发生变化，但是应该为这个 url 渲染的组件不会被渲染。重新渲染似乎被阻止了。我正在使用连接的反应路由器。在实现 connected-react-router 之前，后退按钮工作正常。我尝试了一个建议的解决方案，用 withRouter 将我的连接函数与 redux 商店包装在一起，但仍然看不到任何结果。

index.js

const store = configureStore();

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

应用程序.js

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

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

export default connect()(App);

导航.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>
  );
};

仪表板.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));

单击 EditBook 按钮时，CreateEditBookContainer.js 会正确呈现，但是当单击后退按钮时，此组件仍然存在，而 Dashboard 组件实际上应该被呈现，因为它对应于在 url 中正确设置的路径“/” . 单击 Navigation 中指定的 Route 链接时，所有组件都会正确呈现。它只在后退按钮上失败。感谢您的任何建议。