陣營路由器新的頁面呈現和前一個組件做browserhistory.push（「/路徑」）

Question

後停留頁面上我有一個路由設置像這樣在我的應用程序：

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

我的應用組件看起來像這樣：

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'。問題是，在書中詳細查看「書目」組件停留頁和頁面看起來像這樣：

<BookDetail> 
<BookList> 

如果我是輸入到我的瀏覽器/書籍/ bookdetail那麼該視圖正確的渲染

<BookDetail> 

爲什麼當我使用browserHistory.push（）頁面時，bookdetail呈現在bookdetail上？

非常感謝。

Answer 1

在以前的版本做出反應路由器（2.0.0版本），我們用：

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

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

在陣營路由器（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