javascript - Display Back button to go back like the browser back button when not in home path - Stack Overflow

admin管理员组

文章数量:1294071

In the header, I have a menu button, that when clicked will display different links to go to. However, I would only like to show the menu button when its in the home path (i.e., "/"). And when I navigate to other pages, I would like to change the the menu button to back button. This back button should be like the browser back button which will go back one step at a time, till I get back to the home path. How can I achieve this? I am using "react": "^15.1.0" and "react-router": "^2.5.2".

AppClient.js

ReactDom.render((
    <Router history={hashHistory} >
        <Route path="/" ponent={App}>
            <IndexRoute ponent={Home} />
            <Route path="home" ponent={Home}/>
            ...
            ...
            <Route path="profile" ponent={Profile}>
                <IndexRoute ponent={Timeline} />
                <Route path="timeline" ponent={Timeline}/>
        </Route>
        <Route path="login" ponent={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>
        );
    }

}

In the header, I have a menu button, that when clicked will display different links to go to. However, I would only like to show the menu button when its in the home path (i.e., "/"). And when I navigate to other pages, I would like to change the the menu button to back button. This back button should be like the browser back button which will go back one step at a time, till I get back to the home path. How can I achieve this? I am using "react": "^15.1.0" and "react-router": "^2.5.2".

AppClient.js

ReactDom.render((
    <Router history={hashHistory} >
        <Route path="/" ponent={App}>
            <IndexRoute ponent={Home} />
            <Route path="home" ponent={Home}/>
            ...
            ...
            <Route path="profile" ponent={Profile}>
                <IndexRoute ponent={Timeline} />
                <Route path="timeline" ponent={Timeline}/>
        </Route>
        <Route path="login" ponent={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>
        );
    }

}

• javascript
• reactjs
• react-router

Share Improve this question Follow asked Jul 20, 2016 at 10:01 Benjamin Smith MaxBenjamin Smith Max 2,7481010 gold badges3636 silver badges5757 bronze badges 3

• Use <input type="button" value="Back" onclick="history.go(-1);" /> – mmushtaq Commented Jul 20, 2016 at 10:10
• This is HTML syntax.. – mmushtaq Commented Jul 20, 2016 at 10:14
• if you are using redux too, then you'll get a router through props and then you can simple check for the router.location.pathname use ternary operator to mount the <Menu /> or <Back /> ponent. Other wise you'll have to listen for route change. – Vikramaditya Commented Jul 20, 2016 at 10:43

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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!=="/"})
        );
    }
    ponentWillUnmount(){
        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 watches path, and decides whether show button or not.

And hashHistory.goBack(), works like browser back button

You need to add the router to your context (https://facebook.github.io/react/docs/context.html).

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

react-router will normally populate the this.context.router variable.

With this this.context.router object, there's a lot of methods available, like goBack() (https://github./reactjs/react-router/blob/master/docs/API.md#goback).

本文标签： javascriptDisplay Back button to go back like the browser back button when not in home pathStack Overflow