Display Zurück-Taste, um zurück wie die zurück-Schaltfläche Ihres Browsers, wenn Sie nicht in der home-Pfad
In der Kopfzeile, ich habe eine Menü-Taste, dass, wenn geklickt wird display verschiedene links zu gehen. Allerdings würde ich nur gerne zeigen Sie die Menü-Taste, wenn es in der home-Pfad (D. H., "/"). Und wenn ich navigieren Sie zu anderen Seiten, würde ich das gerne ändern das die Menü-Taste, um zurück-Taste. Dieser zurück-button sollte wie der browser-zurück-Taste gehen Sie einen Schritt zurück, zu einer Zeit, bis ich wieder nach Hause Weg. Wie kann ich das erreichen? Ich bin mit "reagieren": "^15.1.0" und "reagieren-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>
);
}
}
- Verwenden
<input type="button" value="Back" onclick="history.go(-1);" />
- Dies ist die HTML-syntax..
- wenn Sie wieder einmal zu, und dann bekommst du den router über Requisiten, und dann können Sie einfach überprüfen Sie für den router.Lage.Pfadnamen verwenden, ternärer operator zum mounten der
<Menu />
oder<Back />
Komponente. Andere weisen, die Sie hören werden, die für die route zu ändern.
Du musst angemeldet sein, um einen Kommentar abzugeben.
jsfiddle demo
listenBefore
Uhren Pfad und entscheidet, ob die Taste zeigen oder nicht.Sowie
hashHistory.goBack()
, funktioniert wie der zurück-Schaltfläche Ihres Browsersreact-router v4
Müssen Sie den router zu Ihrem Kontext (https://facebook.github.io/react/docs/context.html).
reagieren-router wird normalerweise füllen Sie die diese.Kontext.router variable.
Mit diesem diese.Kontext.router Objekt, es gibt eine Menge von Methoden zur Verfügung, wie goBack() (https://github.com/reactjs/react-router/blob/master/docs/API.md#goback).