Open alukach opened 6 years ago
Same thing with me. Any answers?
Update: some digging and I found some potential answers.
Backstory - my situation was almost exactly the same as yours. Top-level element within a route had a wrong attribute carried over from the home view.
Looks like my issue was caused by my Express serving of the new static files. I've moved over to using react-snap
, but I was having the same exact issue with react-snapshot
.
I found that react-snap
was indeed building proper HTML versions of my pages, and the incorrect attributes in question were indeed correct within them. But, my Express app was directing all traffic to my homepage index.html
, and React Router was having conflicts when trying to hydrate the data.
So the homepage was loaded (even if it looked like a subpage was loaded in the browser), and then React picked up, hydrated everything properly besides that one attribute on the top level. Must not have seen it was different? Not sure.
I fixed this by having Express serve the entire build folder as static, so the other generated index.html
files could be picked up properly and would be loaded correctly instead of having the home route HTML load first each time and then hydrate.
I'd love some clarity into this as I am not too familiar with how hydration works and how we can force React to pick up small text differences like this during the process.
Thanks for the input, @jmikrut! I can verify that switching to react-snap
avoids the issue. Not sure what causes the problem with react-snapshot
but this fix works well enough for me.
I'll leave the ticket open as I do believe it is a bug, any of the maintainers of the repo are welcome to comment or close.
I am experiencing a strange bug where if I visit a route via a direct URL (i.e. loading the snapshot HTML), the component rendered within the route has the wrong base element. However, the elements beyond base elements are fine. This feels like I may be missing something about how routing or react-snapshot works, so pardon if this is a problem with my implementation.
Here's an example:
If you navigate to
/foo
from within the app, the route renders as it should:However, when you access
/foo
directly, for some reason the route renders with theid
of the/
route:If I remove the first
div
elements out of every view, the/foo
route renders as the following when visited directly:My project is created from
create-react-app
.package.json
yarn.lock