natahouse / react-snap

nata.house's fork of @stereobooster's react-snap:👻 Zero-configuration framework-agnostic static prerendering for SPAs
MIT License
32 stars 6 forks source link

Fix injecting index route HTML into other route screens #35

Open mallikcheripally opened 3 years ago

mallikcheripally commented 3 years ago

I created a new project using Create React App v4.0.3, React v17.0.2, React Router DOM v5.2.0. Added the configuration needed to run react-snap post-build and followed the other instructions mentioned at NPM package documentation.

The app works as expected when the main route / is hit and the source code is generated as per expectation. But when a different route like maybe /route1 or /route2 is hit, styling gets broken and the source code shows for the main route instead of for route1.html

//App.js
...
<Switch>
    <Route path="/" exact component={HomePage} />
    <Route path="/route1" component={Route1Page} />
    <Route path="/route2" component={Route2Page} />
</Switch>
...
//index.js
...
const rootElement = document.getElementById('root');

const MainApp = () => (
    <React.StrictMode>
        <Provider store={store}>
            <BrowserRouter>
                <App />
            </BrowserRouter>
        </Provider>
    </React.StrictMode>
);

if (rootElement.hasChildNodes()) {
    ReactDOM.hydrate(<MainApp />, rootElement);
} else {
    ReactDOM.render(<MainApp />, rootElement);
}
...
//HomePage.js
...
<div className="home-page">
    <div className="home-landing-section>
        Home Page
    </div>
</div>
...
//Route1.js
...
<div className="route1-page">
    Route1 Page
</div>
...

Post-build the behavior is a bit unexpected when hitting "/route1" because, under Developer Tools > Element panel, the HTML structure is as follows:

...
<div className="home-page">
    <div className="home-landing-section>
        <div className="route1-page">
            Route1 Page
        </div>
    </div>
</div>
...

When looking at the source code directly in the route.html file, it's as expected. However when hit View Source Code from the /route1, it shows the Home Page source code.

I've tried playing around with the configuration but doesn't seem to help. @philipeatela How to solve this issue?

philipeatela commented 3 years ago

Sorry for the delay, I have not been having enough time to look at this repo. I'll look into your issue and see if I can help somehow (if it still matters for you).

mallikcheripally commented 3 years ago

That would be great if you could help me with this one!