Hiển thị nút Quay lại để quay lại như nút quay lại trình duyệt khi không ở trong đường dẫn nhà

Question

Trong tiêu đề, tôi có nút menu , khi nhấp vào sẽ hiển thị các liên kết khác nhau để truy cập. Tuy nhiên, tôi chỉ muốn hiển thị nút menu khi nút trong đường dẫn nhà (ví dụ: "/"). Và khi tôi điều hướng đến các trang khác, tôi muốn thay đổi nút menu thành nút quay lại. Nút quay lại này sẽ giống như nút quay lại của trình duyệt sẽ quay lại một bước tại một thời điểm, cho đến khi tôi quay lại đường dẫn chính. Làm thế nào tôi có thể đạt được điều này? Tôi đang sử dụng "phản ứng": "^ 15.1.0" và "phản ứng-bộ định tuyến": "^ 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 đồng hồ con đường, và quyết định xem nút chương trình hay không.

Và hashHistory.goBack(), hoạt động như trình duyệt lại nút

Answer 2

Bạn cần phải thêm Router đến ngữ cảnh của bạn (https://facebook.github.io/react/docs/context.html).

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

phản ứng-router thường sẽ cư biến this.context.router.

Với đối tượng this.context.router này, có rất nhiều phương pháp có sẵn, như GoBack() (https://github.com/reactjs/react-router/blob/master/docs/API.md#goback).