react路由返回，怎么不跳出项目

在React项目中，有时会出现需要点击返回上一页的场景。通常我们会使用以下代码来实现：

history.back();

然而，当用户在新窗口中输入可点击返回页面的网址时，点击返回按钮将会跳出项目。为了解决这个问题，我们需要监听路由的变化，并维护一个路由统计值。当路由计数为0时，点击返回按钮将执行返回首页的操作。

下面是一个示例代码：

import { history } from 'umi';

export default () => {
  const [routeLength, setRouteLength] = useState(0);

  useEffect(() => {
    const unlisten = history.listen((listener: any) => {
      console.log('listener', listener)
      if (listener.action === 'PUSH') {
        setRouteLength(routeLength + 1);
      } else if (listener.action === 'POP') {
        setRouteLength(routeLength - 1);
      }
    });

    return () => {
      unlisten();
    };
  }, []);

  // 在具体执行路由返回时判断 routeLength 是否为 0
  // 如果为 0，说明当前项目已经没有可返回的路由了，执行 history.replace('/') 操作返回项目首页
}

以上代码仅展示了一种思路，你可以根据具体情况进行变化，例如维护一个路由栈来查看上一个具体路由等。

在具体执行路由返回操作时，判断 routeLength 是否等于 0。如果等于 0，说明当前项目已经没有可返回的路由了，此时执行 history.replace('/') 操作，返回项目首页。