javascript – 在goBack()反应路由器v4之前检查历史记录之前的位置

我的目标是启用“返回”按钮,但前提是用户返回的路径/路径属于某个类别.

更确切地说,我有两种路线：/< 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>
);

我想在Graph组件中实现类似的东西：

if (this.props.history.previousLocation().indexOf('graph') > -1){
    this.props.history.goBack();
} else {
    this.disableReturnButton();
}

这个问题也适用于goForward(),因为如果不适用我想禁用“前进”按钮.用户也可以使用this.props.history.push(newLocation)移动

显然,当用户四处移动时,我想避免使用像登录localStorage或redux商店这样的方法,感觉不那么自然,我知道怎么做.

解决方法

在通过Link组件或甚至history.push导航时,您可以将当前位置传递给另一个Route组件

喜欢

<Link to={{pathname: '/graph/1',state: { from: this.props.location.pathname }}} />

要么

history.push({
  pathname: '/graph/1',state: { 
      from: this.props.location.pathname
  }
})

然后你可以在你的组件中获得这个位置,如this.props.location.state&& this.props.location.state.from然后决定你是否不去反击