salvoravida/redux-first-history

Remove react router basename from LOCATION_CHANGE redux action pathname

steinarb opened this issue · 7 comments

steinarb commented

I would like the react router basename, if set, to be removed from payload.location.pathname in LOCATION_CHANGE redux actions created by router navigation.

I would also like push(LOCATION_CHANGE) to navigate to the correct place in the router, when the basename is omitted from payload.location.pathname.

This is related to #87

steinarb commented

The reason for this, is because swipe navigation in this app https://github.com/steinarb/oldalbum broke after I upgraded to react v18/react router v6, which broke connected-react-router so I had to change to redux-first-history.

Everything seemed to work fine at first until I tried doing swipe navigation in chrome devtools simulated mobile phone setup.

Then navigation got a 404 because the basename was gone from the navigation URL.

I eventually traced this down to a change in history: remix-run/history#810

Short story: basename was removed when going from history v4 to history v5 and it is not coming back (the reason is size: basename handling was the reason for 50% of history v4's code)

I can work around this for now by adding the basename in the path of LOCATI ON_CHANGE events sent with push() but it is messy.

I run multiple webapps in apache karaf on port 8181 on different web contexts and then I reverse proxy them through a DNS aliase.

E.g. I have http://localhost:8181/oldalbum and then I expose it out on the web as https://oldalbum.bang.priv.no

So the navigation code of the app needs to deal with both "/oldalbum" and "" at the start of the paths.

Previously this was done with setting the basename on the history, and then things just worked.

But that's no longer possible.

However react router v6 implements a basename, so if redux-first-history could hook into that it would be possible to get the magic back...?

salvoravida commented

Hi, can you create a codesandbox with a basic code sample?

salvoravida commented

OK, a couple of points
since guys at remix-run have dropped support for basename in history while supporting it only in react-router, there is nothing redux-first history can do internally, as it's just a bridge between them.
What you can do are 2 solution:

  1. remix-run/history#810 (comment) (the ugly one)
  2. remix-run/history#810 (comment) (the pretty one)
steinarb commented

OK, a couple of points since guys at remix-run have dropped support for basename in history while supporting it only in react-router, there is nothing redux-first history can do internally, as it's just a bridge between them. What you can do are 2 solution:

I was sort of hoping there were APIs on the react-router you could hook in to, but I guess if you're the bridge between the history and the react-router, there is, as you say, not much you can do..

  1. Where did basename go? [v5] remix-run/history#810 (comment) (the ugly one)
  2. Where did basename go? [v5] remix-run/history#810 (comment) (the pretty one)

Yes, I'm doing sort of 1 for now, as a workaround to get things working again.

None of the alternatives makes me happy. :-/

Things were so simple when basename was handled by the history, and now they are not.

One possibility would be to downgrade history to 4 and stay there for as long as it works...?

steinarb commented

@salvoravida A question: what if there was a redux store state value the basename could be read from?

Could that be leveraged by redux-first-history in some way, that would be not-too-hacky?

What I did was to

  1. Calculate the basename from the URL the application was opened with and set that as the basename in the redux-router as well as save it to state.basename (this is in oldalbum.web.frontend/src/main/frontend/src/index.js)
  2. In the reducer for state.basename, set the basename if it is other than "/" which is set as the empty string (which is the default) oldalbum.web.frontend/src/main/frontend/src/reducers/basenameReducer.js
  3. In the components Album.js, Picture.js and DeleteButton.js add "basename + " on all paths in dispatched push() actions
  4. In locationSaga.js, which triggers load actions on when entering certain router locations, add "basename + " on all paths tested against the location
  5. In albumSaga.js and pictureSaga.js add "basename + " to the paths sent to push() actions

It would be really neat if I was able to lose "basename + " from the sagas and components! Really, really neat!

The full change is here: steinarb/oldalbum@a52ae72

steinarb commented

My app greatly simplified! Thank you! steinarb/oldalbum@4d2c704