Comments (13)
Hello @thupi I'm looking into this, but I still can't figure out what's going on.
Your Navigation is:
"app.page.article", params:{id:1} -> "app.page.info", params:{id:2}
In this case the intersection is the "app" node, that is the AppRouter
component, so this should re-render and in turn all its children should be re-rendered, so also Page -> PageRouter -> Info
and it shouldn't matter that PageRouter
is not the intersection node because at this time the parent (AppRouter
) should have forced the re-rendering of all its children.
But instead this weird behaviour happens:
AppRouter
re-render with the correct route injected (OK)Page
re-renders (OK)PageRouter
re-render BUT for some reason it has the old route, so it will select the wrong component (Wrong)Article
re-render instead ofInfo
because of previous point (Wrong)
I suspect that something in react or mobx has changed about timings and internal priorities, most probably setState (used here)
Let me know if you can spot anything that might help figuring out the problem, thanks!
from react-mobx-router5.
Ok, this seems to be a bug on my side.
The logic to handle when a routeNode
should re-render is this:
@computed get isIntersection() {
return this.routerStore.intersectionNode === this.nodeName;
}
componentDidMount() {
this.autorunDisposer = autorun(() => {
// Change state only if this is the correct "transition node" for the current transition
// This will re-render this component and so the wrapped RouteSegment component
if (this.isIntersection) {
this.setState({
route: this.routerStore.route
});
}
});
}
Now when navigating from /a/1/b
to /a/2/c
it fails.
Similar packages, like react-router5 don't seems to have this extra check and they just re-render all the time.
Removing the extra verification if (this.isIntersection)
should fix the problem.
I wanted to prevent this but now this seems a bit buggy.
Anybody has a better idea to achieve selective re-rendering (only when needed and for the right components)?
from react-mobx-router5.
@LeonardoGentile Couldn't it be fixed if you also check if the segment has been changed from the previous route to the current route inside the computed function? :-)
The might result in the all routeNodes checks if there child segment has bee changed and re-render if so. :-) ?
from react-mobx-router5.
I think one option could be:
@computed get shouldUpdate() {
const isIntersection = this.routerStore.intersectionNode === this.nodeName;
const toActivate = this.routerStore.toActivate.find((item, index, array) => {
return item === this.nodeName
});
return isIntersection || toActivate
}
componentDidMount() {
this.autorunDisposer = autorun(() => {
// Change state only if this is the correct "transition node" for the current transition
// Or the segment represented by the node is one of those that needs to be activated
// This will re-render this component and so the wrapped RouteSegment component
if (this.shouldUpdate) {
this.setState({
route: this.routerStore.route
});
}
});
}
from react-mobx-router5.
Hi @LeonardoGentile, is there a workaround until this issue gets fixed?
from react-mobx-router5.
Hello, no sorry.
I've replicated the issue also in the react-router5 package and awaiting the router5 creator for an answer because I'm still not sure if this is an implementation error on my side, a misconfiguration or just something router5 can't do.
from react-mobx-router5.
Thanks for the heads up Leonardo.
from react-mobx-router5.
I've got a potential solution here.
Is anybody available to review this?
from react-mobx-router5.
@LeonardoGentile That seems to be a good solution for now :-)
I am convinced that this should solve the problem :-) Do you want me to test it in one of my projects :-) ?
from react-mobx-router5.
@thupi yes if you could please.
It's not published on npm so you can clone or download it, then cd into it and activate the issue6
branch and npm link
. Finally cd into your project where you use this package and npm link react-mobx-router5
.
I know this should fix the original problem but could you please double check it doesn't trigger any extra unwanted updates?
Thanks!
from react-mobx-router5.
@LeonardoGentile I tried to take a look at but i discovered that the projects i work with where we are using the packages has been redesigned in the meantime. It would need to recreate the sample i made for this issue in order to test that behavior :-)
I think I will be able to find the time to recreate the sample in the coming weekend :-)
However, since the solution is implemented in router5 you might not need the same implementation in this package right :-) ?
from react-mobx-router5.
:tada: This issue has been resolved in version 6.1.0 :tada:
The release is available on:
Your semantic-release bot 📦🚀
from react-mobx-router5.
@thupi if you have the time I've found another solution, it's version 6.1.0 and it relies on router5@6
from react-mobx-router5.
Related Issues (12)
- Update peerDependencies to [email protected] HOT 2
- BaseLink onClick prop should not require router HOT 4
- Hooks? HOT 1
- A better 'Something went wrong.' view HOT 6
- Facing issues with latest version of react HOT 1
- support for disabled attribute in BaseLink HOT 2
- react 16 support HOT 1
- duplicate rendering HOT 7
- update to support MobX 4 HOT 1
- Feedback from users HOT 3
- MobX 5 compatibility HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-mobx-router5.