在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('/')
操作,返回项目首页。