react路由跳转单页面开发，地址栏拼接

最新推荐文章于 2025-09-19 20:36:42 发布

原创最新推荐文章于 2025-09-19 20:36:42 发布 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端框架

本文介绍了一种在单页面应用中实现页面跳转前后状态保持的方法。通过利用qs库拼接参数至URL，确保了即使在页面跳转后，也能通过浏览器的历史记录返回到之前的页面状态，且数据完整保留。

前提：开发一个需求数据看板页面有一个对比功能，当点击对比功能需要将当前页面的数据带到第二个页面进行请求并渲染，同时返回时会之前页面的数据不丢失。

由于我们的系统是单页面的，当页面跳转之后，当前页面的状态就会被清空，所有再次返回的时候数据全部丢失了，此时的想法就是将需要保留的参数在change的时候拼接到地址栏上，当页面跳转之后再次返回，history的push和goBack是不会改变路由地址的，所以当前页面的地址栏拼接参数之后跳转到其他页面再返回时参数不会丢失，这样可以从地址栏中获取参数进行页面渲染，这样做的另一个好处就是我当前页面的各项配置数据想要发给他人查看时，复制地址链接是带有参数的，他人查看时会保留我的选项。

地址拼接用到qs库：

首先将原有地址的参数拿到：

 const query = qs.parse(location.search.slice(1))

后续拼接参数：

//进入qs
import qs from 'qs'
  //地址栏拼接
const getQueryString = (value) => {
    props.history.replace(
      `?${qs.stringify({
        ...query,
        ...value,
      })}`
    )
  }

页面一遍会有初始值，所以在change的时候拼接参数到地址栏就可以

<Select
         showSearch
         placeholder="请选择一级机型"
         filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
          onChange={(value) => {
                      setFirstClassId(value)
                      getQueryString({ firstClassId: value })
                    }}
           style={{ width: '80%' }}
                  >
                    {selectChildren}
                  </Select>