Question

似乎没有API方法可以检测您是否可以从应用中的当前页面返回。可以检查历史长度，但包括前向和后向堆栈。

我希望仅在用户实际可以返回时显示后退按钮。

Answer 1

你可以通过检查 history.action 如果它的值是 POP 来实现，那么就没有返回的路径。这是我找到的唯一方法。

<Button
  onClick={() => {
    if (history.action !== 'POP') history.goBack();
  }}
  disabled={history.action === 'POP'}
/>

Answer 2

您可以通过检查location.history是否大于2来实现。

显示或不显示应用程序中的后退按钮的示例：

onBack={ history.length > 2 ? () => { history.goBack() } : null }

Answer 3

我想我找到了一种解决方法

有onpopstate event：

调用history.pushState（）或history.replaceState（）不会触发popstate事件。 仅在执行同一文档的两个历史记录条目之间的导航操作时才会触发popstate事件，例如单击后退按钮（或在JavaScript中调用history.back（））。 / p>

我检查了一下：React Router在状态下保存了一个关键属性：在历史记录中，它可能包含类似以下的数据： event.state：{key：“ jr2go2”，state：未定义}

当我们返回到网站的最后一页时，该状态属性将为null： event.state：空 ，

因此我们可以使用redux + rxjs（例如）来处理它，

// epic
export const handleHistoryWalkEpic = () =>
  fromEvent<PopStateEvent>(window, 'popstate')
  .pipe(
    map(event => setCanGoBack(!!event.state)),
  )

// reducer
case NavigationBarActionsTypes.SET_CAN_GO_BACK:
  return {
    ...state,
    canGoBack: action.payload.canGoBack,
  }

并且您应该在任何推送历史记录操作中将canGoBack设置为true，这可以通过任何路由器处理程序组件进行：

componentWillUpdate(nextProps: any) {
    let { location } = this.props;

    if (nextProps.history.action === 'PUSH') {
      this.props.setCanGoBack()
    }
}

Answer 4

它提供'POP'和'PUSH'值using this.props.location.action

如何知道react-router是否可以返回到在反应应用程序中显示后退按钮

4 个答案: