javascript – 显示返回按钮,以便在不在主路径时返回浏览器后退按钮

前端之家收集整理的这篇文章主要介绍了javascript – 显示返回按钮,以便在不在主路径时返回浏览器后退按钮前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
标题中,我有一个菜单按钮,单击该按钮将显示要转到的不同链接.但是,我只想在主页路径中显示菜单按钮(即“/”).当我导航到其他页面时,我想将菜单按钮更改为后退按钮.这个后退按钮应该像浏览器后退按钮一样,一次一步,直到我回到主路径.我怎样才能做到这一点?我正在使用“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>
        );
    }

}

解决方法

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 watch path,并决定是否显示按钮.

而hashHistory.goBack(),就像浏览器后退按钮一样

原文链接:https://www.f2er.com/js/156781.html

猜你在找的JavaScript相关文章