React-router 执行 browserhistory.push('/path') 后，新页面呈现并且之前的组件保留在页面上

Question

我的应用中有这样的路由设置：

 <Router history={browserHistory}>
   <Route path="/" component={App}>
     <Route path="/books" component={Main} url='/polls/getbooks/'/>
     <Route path="/books/bookdetail" component={BookDetail} />
   </Route>
 </Router>

我的 App 组件如下所示：

class App extends React.Component {
    pageContent() {
      let content = <Spinner/>;

      if (!this.props.dataLoading) {
         content = (
           <ReactCSSTransitionGroup
             component="div"
             transitionName="bobon-transition"
             transitionEnterTimeout={500}
             transitionLeaveTimeout={500}
             transitionAppear={true}
           >
           { React.cloneElement(this.props.children, {
             key: this.props.location.pathname
           }) }
        </ReactCSSTransitionGroup>
     );
   }
   return content;
 }

    render() {

      let content = null;

      if (!this.state.authed) {

        content = (
            <div className="pf-authed">
              <AppHeader/>
              <div className="bobon-page-content page-content">
                { this.pageContent() }
              </div>
              <AppFooter/>
            </div>
       );} else {

        content = (
            <div className="pf-authed">
              <AppHeaderAuthed/>
              <div className="bobon-page-content page-content">
                 { this.pageContent() }
              </div>
              <AppFooter/>
            </div>
        );
    }
}

这是我的主要组件：

class Main extends React.component {

  render() {

   if(!this.state.loaded) {
      return <Spinner/>
   }

   if(this.state.authed) {
      content = (
                <div >
                    <BookList apiData = {this.state.childData}/>
                </div>
                );
   } else {
      content = (
                <div>
                    <LoginForm/>
                </div>
                );
    }
    return content;
  }

}

当用户登录时，页面正确呈现并且他看到了“BookList”组件。但是，在 Booklist 中，当用户选择一本书时，我使用 browserHistory.push('/books/bookdetail') 导航到“BookDetailView”。问题在于，在图书详细视图中，“BookList”组件保留在页面上，页面如下所示：

<BookDetail>
<BookList>

如果我在浏览器中输入 /books/bookdetail，那么视图将正确呈现为

<BookDetail>

当我使用 browserHistory.push() 页面时，为什么会在 bookdetail 上呈现“BookList”？

非常感谢。

Answer 1

在以前版本的 React Router（2.0.0 版）中，我们曾经：

import { browserHistory } from './react-router'

// then in your component
browserHistory.push('/books/bookdetail')

在较新版本的 React Router（2.4.0 版）中，我们可以使用 this.props.router.push('/books/bookdetail')。为此，您需要使用 withRouter 包装器。例如，在导出 BookList 组件时可以这样做。

import { withRouter } from 'react-router';

class BookList extends React.Component {
  clickHandler() {
    this.props.router.push('/books/bookdetail');
  }
  render() {
  // if used in the render method you can use:
  // <h1 onClick={()=>this.props.router.push('/books/bookdetail')}>Book title</h1>
  }
}

export default withRouter(BookList);

更多信息：

https://github.com/ReactTraining/react-router/blob/master/docs/API.md#withroutercomponent-options

react - router withRouter does not inject router