Comments (21)
@jlongster I suspect the problem is here:
if (routing.path !== locationToString(window.location) && !routing.noRouterUpdate) {
history.pushState(null, routing.path);
}
With createHashHistory
, this statement: routing.path !== locationToString(window.location)
will always be true (as a new hash is always created with an appended string of characters that's never equal to the intended routing path).
In general, the problem is that all actions are triggering a router state change. The actions need to be filtered so that only route-specific actions can trigger a state change.
from react-router-redux.
@davidkpiano you're looking at an out-of-date source. Look at https://github.com/jlongster/redux-simple-router/blob/master/src/index.js#L68. Only specific route changes will trigger a change.
from react-router-redux.
@smashercosmo thanks for the report, that's very interesting. I'll see if I can reproduce.
from react-router-redux.
@jlongster Sorry for not providing reproducible example, just hadn't time for that. If you're not going to dig into that problem right now, I can make a demo repo by tomorrow evening.
from react-router-redux.
I'll try to reproduce for a few minutes but if I can't I'll wait for your test case. Thanks!
from react-router-redux.
deal)
from react-router-redux.
@jlongster any luck in reproducing? Should I make a live example?
from react-router-redux.
Just bumped into this, I can reliably see the changeID
not changing when I hit the back button since the avoidRouterUpdate
is true.. FWIW, I got to the next location via updatePath
and not a <Link>
component.
from react-router-redux.
I have a live example here:
https://github.com/LeBlaaanc/react-webapp/blob/master/src/components/molecules/SignUpLink/SignUpLink.jsx#L19
Once the action fires I'm brought to the signup page but can't go back.
from react-router-redux.
Thanks a lot everyone. Because of Thanksgiving I haven't been able to look into it yet.
The changeId
should not update when pressing back. That only tracks state changes and signifies that we need to call back into the router. The router should be the one that already handles the back button automatically, and rerenders the routing components. All we need to do in that case it update the state in the store.
@stuartc That's a good use case: hitting the back after updatePath
. For some reason that may not be working. I'll try to look into it, but I'm traveling all day tomorrow.
@smashercosmo Take a look at @LeBlaaanc and if you think that's a good example then I can take a look there.
from react-router-redux.
BTW I just merged #38 which was a decent patch, but the sync logic is basically the same so I don't think I solved this. But it might have changed something.
from react-router-redux.
@jlongster no worries man, on a bit of a tight deadline myself. But I managed to get the back button to work by removing avoidRouterUpdate
from the history.listen
subscriber.
What is the intent of the avoidRouterUpdate
flag? Surely we want to update the router store when the path has changed? I naively can't think of a reason where we wouldn't want that.. I must be missing the baseline behaviour around the listener.. :)
from react-router-redux.
@stuartc We need a way to break the cycle, because two objects are listening to each other. If we don't break it, they will recursively call into each other.
To be clear, we break the cycle both ways. If the app state changes it'll update the router, but the router will check the current path and compare it with what's in the state and see that it's the same and do nothing. If the router changes, it will fire the updatePath
action and update the state, but we need a way in the store listener to not call back into the router. That flag just tells it not to.
The router has already been updated; the event is coming from the router itself after it updated. So we don't need to update it.
It probably still works because it is calling back into the router but the path is the same now so it stops. But I'm surprised you aren't seeing additional history entries; the store listener should be calling pushState
again now (although, you may be using the latest version of react-router where calls with the same path actually do a replace
, so no additional entries).
I'm going to look into this more now.
from react-router-redux.
@LeBlaaanc you're problem is that you are using an tag and not preventing default. You are updating the URL twice; the does it natively and then you are calling updatePath
, so it makes sense you'd have to press back twice.
from react-router-redux.
@smashercosmo I need a live example. I cannot reproduce this.
from react-router-redux.
@stuartc Can you provide some code or even better, a reproduce live example? You should not see the changeId
changing if the router itself is already taking care of changes. Remember, react-router takes care of almost everything; it's listening to route changes (including the back button) and will automatically change the route for you.
So far I've only seen user-land bugs, but I'd love to track down the issue if there is one.
from react-router-redux.
@jlongster what do you mean "the does it natively"?
from react-router-redux.
@jlongster I've cloned the example project and tweaked it to match my env, couldn't recreate it. I did notice the example project used a newer version of react-redux
, which after upgrading the back button started working again - my colleague did say he ran into something else; but that's looking unlikely related.
If I run into anything again, I'll finish up my changes to the example project and get in tough with a running example. Thanks a lot man!
from react-router-redux.
@LeBlaaanc When you click an anchor tag, the browser will go to that link.
from react-router-redux.
Closing this issue until someone can post a reproducible issue.
from react-router-redux.
I think I am seeing this issue see video:
https://www.youtube.com/watch?v=rGIjLFSsr84
from react-router-redux.
Related Issues (20)
- with react-router 4.X and react-router-redux 5.0, the devTools can not replay different path HOT 3
- Expose defaultSelectLocationState HOT 2
- Action name HOT 2
- about goBack and go(-1) HOT 1
- Error: Element type is invalid: expected a string HOT 1
- example change url but not component HOT 1
- why browserHistory not working?
- Why there is no action creator for LOCATION_CHANGE? HOT 2
- routes not working properly HOT 1
- how to use hashRouter in react-router-redux HOT 1
- push() replaces url HOT 4
- History with other sites. HOT 1
- basename not working on react-router-redux 5.0.0-alpha.9 HOT 1
- Where is `this.props.location` and `this.props.history` in react-router-redux? HOT 1
- How does `selectLocationState` work? Give examples HOT 3
- LOCATION_CHANGE is wrong action type HOT 1
- How to preserve router in ownProps? HOT 1
- -router
- Ability to modify 'location' with my own reducer? HOT 1
- The readme section "We're moving" is misleading. The "new" location says *Project Deprecated* HOT 1
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-router-redux.