需求是我这里有个页面,离开当前页面之后,需要在菜单栏显示个提示,也就是Tour
const [unblock, setUnblock] = useState<() => void>(() => () => {});
const [next, setNext] = useState('');
useEffect(() => {
const unblockHandler = history.block(({ action, location }) => {
if (action === 'PUSH' || action === 'REPLACE') {
setNext(location.pathname);
setLogoTourOpen(true);
return false;
}
});
setUnblock(() => unblockHandler);
return () => {
unblockHandler();
};
}, [history]);
const handleTourClose = () => {
setLogoTourOpen(false);
unblock?.();
if (next) {
history.push(next);
}
};
const [refs1, setRefs1] = useState<(Element | null)[]>([]);
const [openLogoTour, setLogoTourOpen] = useState<boolean>(false);
const steps2: TourProps['steps'] = [
{
title: '',
description: `You can click on the logo to easily logo back to the Get Started page `,
target: () => refs1[0],
placement: 'bottom',
nextButtonProps: {
children: <span>OK, I know</span>,
},
},
];
// 放在组件里就行
<Tour
open={openLogoTour}
onClose={() => {
setLogoTourOpen(false);
updateGettingStartedInfo('logoPage');
handleTourClose();
}}
steps={steps2}
/>