javascript 在 goBack() 反应路由器 v4 之前检查历史以前的位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47409586/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Check history previous location before goBack() react router v4
提问by ted
My goal is to enable a "Go Back" button, but only if the route/path the user would go back to is in a certain category.
我的目标是启用“返回”按钮，但前提是用户返回的路线/路径属于某个类别。
More precisely I have two kinds of Routes : /<someContent>and /graph/<graphId>. When the user navigates between graphs they should be able to go back to the previous graph but not to a /...route. This is why I can't simply run history.goBack(), I need to check the location first.
更准确地说，我有两种 Routes :/<someContent>和/graph/<graphId>. 当用户在图表之间导航时，他们应该能够返回到上一个图表，但不能返回到/...路线。这就是为什么我不能简单地运行history.goBack()，我需要先检查位置。
const history = createHashHistory();
const router = (
<ConnectedRouter history={history}>
<Switch>
<Route exact path='/' component={Home}></Route>
<Route exact path='/extension' component={Home}></Route>
<Route exact path='/settings' component={Home}></Route>
<Route exact path='/about' component={Home}></Route>
<Route exact path='/search' component={Home}></Route>
<Route exact path='/contact' component={Home}></Route>
<Route path='/graph/:entityId' component={Graph}></Route>
</Switch>
</ConnectedRouter>
);
I'd like to implement something like this in the Graphcomponent:
我想在Graph组件中实现这样的东西：
if (this.props.history.previousLocation().indexOf('graph') > -1){
this.props.history.goBack();
} else {
this.disableReturnButton();
}
This question also applies to goForward()as I'd like to disable the "forward" button if not applicable. Also the user moves around with this.props.history.push(newLocation)
这个问题也适用于goForward()我想禁用“前进”按钮（如果不适用）。用户也四处走动this.props.history.push(newLocation)
Obviously I'd like to avoid using side-tricks like logging in localStorageor a redux storeas the user moves around, it feels less natural and I know how to do it.
显然，我想避免在用户四处移动时使用诸如登录localStorage或 redux 之类的小技巧store，这感觉不太自然，而且我知道该怎么做。
回答by Shubham Khatri
While navigating though the Linkcomponent or even though history.push, you could pass the current location to another Routecomponent
在浏览Link组件时history.push，您可以将当前位置传递给另一个Route组件
like
喜欢
<Link to={{pathname: '/graph/1', state: { from: this.props.location.pathname }}} />
or
或者
history.push({
pathname: '/graph/1',
state: {
from: this.props.location.pathname
}
})
and then you could just get this location in your Component like this.props.location.state && this.props.location.state.fromand then decide whether you wan't to goBackor not
然后你可以只在您的组件一样得到这个位置this.props.location.state && this.props.location.state.from，然后再决定是否wan't到goBack与否
回答by Rhuarc13
The history object has entries and the current index. I used these in the following way:
历史对象有条目和当前索引。我以下列方式使用这些：
var lastLocation = history.entries[history.index - 1];
var lastUrl = lastLocation.pathname;
