TS+React在路径中记录信息，实现link跳转返回之后停留在跳转之前的页面，并展示跳转之前获取的数据。

需求：实现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])

最后

以上就是现代大神为你收集整理的TS+React在路径中记录信息，实现link跳转返回之后停留在跳转之前的页面，并展示跳转之前获取的数据。的全部内容，希望文章能够帮你解决TS+React在路径中记录信息，实现link跳转返回之后停留在跳转之前的页面，并展示跳转之前获取的数据。所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。