使用嵌套路由时,会出现含有路由组件的父组件被卸载的问题
Closed this issue · 18 comments
1.问题:在某个大的父组件中,书写一个子组件,该子组件就是常规的路由组件,但通过交互触发二级路由的时候,会导致父组件被卸载;
如图,leftPanel是一个菜单组件,rightContent包含了路由组件;可以通过leftPanel修改路由,触发rightContent的某一项route,但我注意到整个Docs组件将会被卸载一次,并且导致leftPanel组件也被卸载一次,这影响了leftPanel中一些业务逻辑;
我注意到,被关闭的issue中有一个:https://github.com/zhangyuang/egg-react-ssr/issues/96,
和我的问题是一致的,作者大大关闭了它,但我还是没有找到如何解决的方法;
目前,由于业务的一些问题,不太方便迁移egg-react-ssr到作者大大最新的ssr框架,劳烦能看看怎么解决吗;
使用的代码是最新的吗 58f6f27
比较难定位问题,left卸载会有什么问题呢,如果你是想要保留高亮的状态,那你应该维护一个state每次渲染组件的时候根据当前的path决定哪一块高亮
在ssr框架能复现吗,能的话可以给个最小复现我看看。不过这里跳转前后两个页面的切换把input清空是正常的。前后两个页面级组件的input是不同的实例。
除非你像在Vue里面一样,把input独立出 router-view , router-view 的切换不会影响input组件
1.这边的input是放在一个页面组件page组件中,下方的路由跳转是通过组件跳转的(我的理解是这个Route组件就类似于router-view),此时的page组件下方会多出一个一部分子组件的页面,但是本质上还是处于page这个页面组件下面,只是插入了一部分新的内容,所以我这里不太理解两个页面级的意思,感觉还是一个页面,作者大大;
2.ssr框架我还没有用过,如果想在egg-react-ssr里面复现这个组件卸载的问题,只需要下载一个ssr-with-js的模版,然后在index组件里面写上二级路由,并且在index组件中写上如上的useEffect,就可以看见index组件每次都被卸载,重新渲染,导致input被清空,本来input不应该被下方的Route组件影响的
可以给一个可复现的ssr-with-js的 demo 仓库我今天有空看看
感谢作者大大!!! https://github.com/hujixin1/hujixin
你的仓库没有build文件夹
抱歉作者大大,已经更新了,刚才被模版默认的gitignore拦截了build的上传,没有注意
作者大大,我更新了github上的例子;
1.我尝试修改config.ssr.js里的route,加入了重复路由,因为/test是个非真实的地址,刷新后会出现404的问题,所以我这里重复书写了一个路由,以命中node;
2.我保持每个route的exact为true,按照之前issue上提到的,想使用嵌套路由,可以去掉一级路由上的exact,这样进行模糊匹配,二级地址也会匹配一级路由,如/docs/xx可以匹配上/docs,如果在docs组件上不设置exact=true的话,但是这样会出现一个问题,会同时匹配上两个路由,还会出现我上述说的刷新404问题;
3.我做了上述改造后,并把layout上面的key去除,还会出现我今天遇见的问题,请问大大这种要怎么处理呢
那你在controller添加对应的path的处理逻辑
这里不太明白怎么做特化处理,作者大大方便再看看我新更新的那个例子吗,可以看看为啥会出现卸载吗,这点我觉得目前比较困惑
刷新404的问题通过controller去解决,跟exact没关系
/doc/*, 需要页面渲染的请求在这里能接收到就行了。这些都是纯业务问题