使用嵌套路由时，会出现含有路由组件的父组件被卸载的问题

[hujixin1]

1.问题：在某个大的父组件中，书写一个子组件，该子组件就是常规的路由组件，但通过交互触发二级路由的时候，会导致父组件被卸载；

如图，leftPanel是一个菜单组件，rightContent包含了路由组件；可以通过leftPanel修改路由，触发rightContent的某一项route，但我注意到整个Docs组件将会被卸载一次，并且导致leftPanel组件也被卸载一次，这影响了leftPanel中一些业务逻辑； 我注意到，被关闭的issue中有一个：https://github.com/zhangyuang/egg-react-ssr/issues/96， 和我的问题是一致的，作者大大关闭了它，但我还是没有找到如何解决的方法； 目前，由于业务的一些问题，不太方便迁移egg-react-ssr到作者大大最新的ssr框架，劳烦能看看怎么解决吗；

[zhangyuang]

使用的代码是最新的吗 https://github.com/zhangyuang/egg-react-ssr/commit/58f6f270b6bc28c9b01f15487fd5e62565219259

[hujixin1]

是的，使用的是最新的代码，hoc是在render之外被调用的；

如图，当我点击左侧切换路由的时候，会触发整个大的docs组件卸载

这似乎并不是有没有在切换路由的时候，调用getInitalProps的问题，而是渲染的问题，常理说，rightContent不应该影响整个docs组件的卸载；

[zhangyuang]

比较难定位问题，left卸载会有什么问题呢，如果你是想要保留高亮的状态，那你应该维护一个state每次渲染组件的时候根据当前的path决定哪一块高亮

[hujixin1]

leftPanel基于antd组件，该antd组件有一个defaultOpenKeys属性，可以控制哪些菜单处于展开状态（菜单指小箭头收缩那一项）；

假设我目前先把菜单1收起来，把菜单二展开，在菜单二点击，触发路由的变化，菜单一不应该被重新展开，而要保持原来的状态； 但目前的问题是，切换路由，left被卸载，会再度初始化，导致他的defaultOpenKeys被重新激活，defaultOpenKeys 就是两项， 会导致菜单一也被展开； （defaultOpenKeys和form组件的initalValue属性类似，就是在挂载第一次时生效，只要组件不卸载，就算重新渲染，也不会触发了）

[hujixin1]

之前那个issue的问题，下方是路由跳转，走的是客户端路由，在跳转之前可以在上方的input输入一些内容，但跳转后，只是局部切换了一些内容，却把上方的input内容清空了，这在业务里面是一种很难控制的问题，传统的cra开发的应用似乎没有这种问题，我一开始怀疑是ssr的问题，切换成csr模式，也有同样的问题，这🈶️可能是框架层面上对路由的支持的一些问题导致的

[zhangyuang]

在ssr框架能复现吗，能的话可以给个最小复现我看看。不过这里跳转前后两个页面的切换把input清空是正常的。前后两个页面级组件的input是不同的实例。

除非你像在Vue里面一样，把input独立出 router-view ， router-view 的切换不会影响input组件

[hujixin1]

1.这边的input是放在一个页面组件page组件中，下方的路由跳转是通过组件跳转的（我的理解是这个Route组件就类似于router-view），此时的page组件下方会多出一个一部分子组件的页面，但是本质上还是处于page这个页面组件下面，只是插入了一部分新的内容，所以我这里不太理解两个页面级的意思，感觉还是一个页面，作者大大；

2.ssr框架我还没有用过，如果想在egg-react-ssr里面复现这个组件卸载的问题，只需要下载一个ssr-with-js的模版，然后在index组件里面写上二级路由，并且在index组件中写上如上的useEffect，就可以看见index组件每次都被卸载，重新渲染，导致input被清空，本来input不应该被下方的Route组件影响的

[zhangyuang]

可以给一个可复现的ssr-with-js的 demo 仓库我今天有空看看

[hujixin1]

感谢作者大大！！！ https://github.com/hujixin1/hujixin

[zhangyuang]

你的仓库没有build文件夹

[hujixin1]

抱歉作者大大，已经更新了，刚才被模版默认的gitignore拦截了build的上传，没有注意

[zhangyuang]

定位了，因为这里用了location.pathname当作key.这里可以根据具体的业务情况来调整key，比如用path当作key

[hujixin1]

作者大大，我更新了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去除，还会出现我今天遇见的问题，请问大大这种要怎么处理呢

[zhangyuang]

那你在controller添加对应的path的处理逻辑

[hujixin1]

这里不太明白怎么做特化处理，作者大大方便再看看我新更新的那个例子吗，可以看看为啥会出现卸载吗，这点我觉得目前比较困惑

[zhangyuang]

刷新404的问题通过controller去解决，跟exact没关系

[hujixin1]

controller中，我尝试用正则去匹配，避免出现404；

但是在前端会出现这个报错，

这个报错的来由不是很明确，为什么两方的比对结果会不同，我仅仅是想把/docs/xx这样的路径都打到/docs的路由上呀

[zhangyuang]

/doc/*, 需要页面渲染的请求在这里能接收到就行了。这些都是纯业务问题