React 使用react-router-dom 中的嵌套路由实现详情页回退列表页不刷新效果

HShuai_

已于 2022-11-15 15:40:55 修改

阅读量1.8k

点赞数

文章标签： react.js javascript 前端

于 2022-11-15 15:38:18 首次发布

本文链接：https://blog.csdn.net/HShuai_/article/details/127866998

版权

本文介绍了在React应用中如何实现嵌套路由，监听路由变化以保存和恢复滚动条位置。首先展示了如何配置父子路由，然后详细说明了在跳转到商品详情页面时如何保存滚动条高度，并在返回时恢复。最后，通过当前路径判断显示列表页或详情页，确保用户体验的连贯性。

摘要由CSDN通过智能技术生成

第一步嵌套路由

	{
      path: "/shopping/goods",
      element: <ShoppingGoods />, //list页面
      children: [{ path: "/shopping/goods/detail", element: <GoodsDetail /> }], //详情页面
    },

第二步监听路由（点击查看详情时需要保存当前滚动条高度）

{
      title: "操作",
      key: "operation",
      width: 100,
      render: (text) => (
        <span
          className="ac"
          onClick={() => {
            navigate(`/shopping/goods/detail?goodsNo=${text.goodsNo}`);
            //保存滚动条高度
            setScrollTop(document.getElementById("code").scrollTop)
            // setGoodsNo(text.goodsNo)
          }}
        >
          跳转商品详情
        </span>
      ),
    },

const { pathname } = useLocation(); //获取当前路径
 useEffect(() => {
 	//监听变化
   if(pathname === "/shopping/goods") {
    //设置滚动条高度
    document.getElementById("code").scrollTop = scrollTop
   }
  }, [pathname])