美文网首页
[React]面包屑返回上一页面并需要记录某些属性

[React]面包屑返回上一页面并需要记录某些属性

作者: 按时吃饭_63fb | 来源:发表于2023-02-28 13:59 被阅读0次

    需求描述:根据某些判定条件搜索查询,返回查询的数据列表。点击Table中的某一行内容,进入到数据详情页面。点击面包屑内容,可以回到上一页面

    面包屑

    实现问题:List Page这个页面,会根据用户选择的搜索条件改变url内容,比如有一些判定条件是keywords='test', types=['A', 'B'],则URL会从本来的xxx/search 替换成xxx/search?keywords=test&types=A&types=B。

    我们希望在点击Table里某一行内容进入到detail的时候,可以记录下上一页面的搜索条件,当点击面包屑List Page返回上一页的时候,可以自动记录搜索条件,并返回搜索后结果。

    使用history.goBack()可以实现这一需求。但是当用户直接访问detail页面的URL时,点击面包屑没反应,是因为这时候的goBack()为空。研究了一下,可以在List Page的每一个detail跳转的Link里配置一下history的state。

    举个例子: <Link to={{ pathname: `xxx/search/${name}`, state: { fromParentPageFlag: true } }}/>

                          view detail

                        </Link>

    这里,我们给每一次跳转加一个state,标注上是否是从上一页面跳转来的,如果是的话,则直接用history.goBack()返回上一页面,否则返回一个默认的页面。则在detail页面的面包屑跳转逻辑可以这样写: 

     <a

                onClick={() =>

                  (history?.location?.state as any)?.fromParentPageFlag

                    ? history.goBack()

                    : (window.location.href = 'xxx/search')

                }

              >

                List Page

              </a>

    这样就不会在用户直接输入这个地址访问的时候,点击面包屑没反应啦!

    相关文章

      网友评论

          本文标题:[React]面包屑返回上一页面并需要记录某些属性

          本文链接:https://www.haomeiwen.com/subject/xidlldtx.html