Navigation routing changes can not change page changes of react.

[Num142857]

Navigation routing changes can not change page changes of react. 导航的路由跳转不能改变react的页面跳转

[joeldenning]

Apologies for the very very slow response.

Could you help me understand what you are describing? Are you saying that navigating between https://single-spa.surge.sh/react/course/0 and https://single-spa.surge.sh/react/course/0/assignments doesn't work?

[tamasfoldi]

@joeldenning I think he was thinking about that if you navigate to https://single-spa.surge.sh/react/course/0/assignments then click on nav bar's react button it changes the url but does not change the page

[AngusFu]

@joeldenning Same issue.

When the page was in /react/calendar, singleSpaNavigate('/react/grades') would not work at all.

The same with “/angularjs/gifs” and “/angularjs/lorem-ipsum”.

[AngusFu]

any progress with this issue?

[frehner]

The issue isn't really a single-spa issue; it's more of a react router / angular router issue. Since all singleSpaNavigate does is (eventually) call history.pushState

The problem is that there isn't a clean way for anyone to listen to changes on history.pushState though it is possible.

It does look like if we upgraded react router to v4 then there would be a way to listen to events that happen on window's history (see the second answer), so it's something to look into doing to make that work in this example.

But in the end, it's not really a single-spa issue -- it's more of a router issue from what I can tell.

As a side note, it's actually pretty easy to listen to hashChanges, so that's another thing to consider. (In other words, it's quite a bit easier to use hash routing since it's much easier to listen to hash changes)

[Num142857]

最终我还是解决了这个问题, 我写在了我的博客里: https://alili.tech/archive/5ff0b366/ 大致有三种解决方案.

1. 通过事件做到模块之间的通讯,再使用模块的路由做页面跳转
2. 统一使用hash路由
3. 像react一样统一模块的路由核心库history,通过customprops传入每个模块

In the end, I solved this problem. I wrote it on my blog: https://alili.tech/archive/5ff0b366/ There are roughly three solutions.

1. Through the event to achieve communication between the modules, and then use the routing of the module to do page jumps
2. Unified use of hash routing
3. Unified module's routing core library history like react, passing each module through customprops