需求:实现link跳转返回之后停留在跳转之前的页面,并展示跳转之前获取的数据。
下来框对应:selectionDepartmentId
tab标签页对应:periodTabKey
在点击下面的计划,并返回后,让其仍然选中当前部门和tab
组件内部代码实现:
const query = useQuery()
const history = useHistory()
const location = useLocation()
//取出路径里的数据
//const query = useQuery()
//query.get('scheduleId')
const [selectionDepartmentId, setSelectionDepartmentId] = useState<string|null>(
query.get('did'),
)
const [periodTabKey, setPeriodTabKey] = useState<CurOrNext>(
Number(query.get('periodTabKey')) || CurOrNext.current,
)
// 在 url 中记录选中的部门和排班周期
useEffect(() => {
if (selectionDepartmentId) {
history.push({
pathname: location.pathname,
search: `?did=${selectionDepartmentId}&periodTabKey=${periodTabKey}`,
})
}
}, [selectionDepartmentId, periodTabKey])