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

需求描述：根据某些判定条件搜索查询，返回查询的数据列表。点击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>

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