顯示返回按鈕，當瀏覽器返回按鈕不在主路徑時，返回瀏覽器後退按鈕

Question

在標題中，我有一個菜單按鈕，點擊時會顯示不同的鏈接。但是，我只想在主路徑中顯示菜單按鈕（即「/」）。當我導航到其他頁面時，我想將菜單按鈕更改爲後退按鈕。這個後退按鈕應該像瀏覽器後退按鈕一樣，一次返回一步，直到我回到主路徑。我怎樣才能做到這一點？我正在使用「react」：「^ 15.1.0」和「react-router」：「^ 2.5.2」。

AppClient.js

ReactDom.render((
    <Router history={hashHistory} > 
     <Route path="/" component={App}> 
      <IndexRoute component={Home} /> 
      <Route path="home" component={Home}/> 
      ... 
      ... 
      <Route path="profile" component={Profile}> 
       <IndexRoute component={Timeline} /> 
       <Route path="timeline" component={Timeline}/> 
     </Route> 
     <Route path="login" component={Login}/> 
    </Router> 
), reactContainer) 

App.js

export default class App extends React.Component { 
    render() { 
     const _this = this; 
     return (
      <div> 
       <Header/> 
       ... 
       ... 
      </div> 
     ); 
    } 
} 

Header.js

export default class Header extends React.Component { 
    render() { 
     return(
      <header> 
       <div id="header-wrapper"> 
        <div id="nav-bar-btn" class="nav"> 

         // change Menu when its not home path that is "/" 
         <Menu> 
         // to Back 
         <Back> 

        </div> 
       </div> 
      </header> 
     ); 
    } 

} 

Answer 1

jsfiddle demo

import { hashHistory } from 'react-router'; 

export default class Header extends React.Component { 
    constructor(props){ 
     super(props); 
     this.state={showBack:location.hash.split('?')[0]!=="#/"}; 
     this.hook = hashHistory.listenBefore(loc=> 
      this.setState({showBack:loc.pathname!=="/"}) 
     ); 
    } 
    componentWillUnmount(){ 
     this.hook(); //unlisten 
    } 
    render() { 
     return(
      <header> 
       <div id="header-wrapper"> 
        <div id="nav-bar-btn" class="nav"> 
         {this.state.showBack? 
         <div onClick={()=>hashHistory.goBack()}>Go BACK</div> 
          : <Menu/> 
         } 
        </div> 
       </div> 
      </header> 
     ); 
    } 
} 

listenBefore手錶路徑，並決定是否顯示按鈕與否。

而且hashHistory.goBack()，工作方式類似於瀏覽器的後退按鈕

Answer 2

您需要的路由器添加到您的上下文（https://facebook.github.io/react/docs/context.html）。

Header.contextTypes = { 
    router: React.PropTypes.object.isRequired 
}; 

反應路由器通常填充this.context.router變量。

有了這個this.context.router對象，有很多可用的方法，如GoBack的（）（https://github.com/reactjs/react-router/blob/master/docs/API.md#goback）。