React Router v6.0.0-beta.1实现多入口页面回退避免跳出应用的方案咨询

你可以直接基于 React Router 提供的路由状态判断跳转来源，不需要修改上游所有 a 系列页面的逻辑，核心是用useNavigationType（v6 版本）判断进入 b1 页面的方式：

import { useNavigate, useNavigationType } from 'react-router-dom';

function B1Page() {
  const navigate = useNavigate();
  // 返回值有三种：PUSH/REPLACE/POP
  const navigationType = useNavigationType();

  const handleBack = () => {
    // PUSH 代表是从本站其他页面通过路由跳转进入的 b1 页，直接回退即可
    if (navigationType === 'PUSH') {
      navigate(-1);
      return;
    }
    // 其他情况（直接输入地址进入、刷新页面、从外部站点跳转进来）走 fallback 逻辑，跳转到默认的返回页，比如首页或者 a1 页
    navigate('/a1');
  }

  return <button onClick={handleBack}>返回</button>
}

如果你用的是 React Router v5 版本，把useNavigationType换成useHistory获取action属性判断即可：

import { useHistory } from 'react-router-dom';

function B1Page() {
  const history = useHistory();
  const handleBack = () => {
    if (history.action === 'PUSH') {
      history.goBack();
      return;
    }
    history.push('/a1');
  }
  // ...
}

疑问解答 #

1. 是否可以通过 history 长度判断回退逻辑？
   可以通过window.history.length获取当前会话的历史记录总长度，但这个值包含用户进入当前站点之前的所有浏览记录（比如用户先开了百度，再输入 b1 地址，此时 history.length 是2），无法区分前一条记录是外部站点还是本站页面，单独用这个判断不可靠，可以搭配路由类型判断做双重校验，不推荐单独使用。

2. 是否需要所有 a 系列页面跳转时传参？
   不需要。上面的方案完全不需要改动上游跳转逻辑，没有冗余成本。只有当你需要针对不同的 a 页面定制不同的 fallback 返回地址时，才需要通过路由 state 传递返回地址参数，常规场景不需要这么做。

内容的提问来源于stack exchange，提问作者Jose Ch.