react-snap
react-snap copied to clipboard
react-snap doesn't work properly with react-router-dom
Bug Report
Current Behavior I have create app using create-react-app and added two routes. However react-snap is working only for Home page. For other routes it is not showing static html when i do view source in browser.
Expected behavior/code React-Snap should work on all pages.
index.js
import React from 'react';
import {hydrate, render} from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
const rootElement = document.getElementById("root");
if (rootElement.hasChildNodes()) {
hydrate(<App />, rootElement);
} else {
render(<App />, rootElement);
}
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
App.js
import React from 'react';
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
import './App.css';
import loadable from "@loadable/component";
import { PrerenderedComponent } from "react-prerendered-component";
const prerenderedLoadable = dynamicImport => {
const LoadableComponent = loadable(dynamicImport);
return React.memo(props => (
<PrerenderedComponent live={LoadableComponent.load()}>
<LoadableComponent {...props} />
</PrerenderedComponent>
));
};
const Home = prerenderedLoadable(() => import("./Home"));
const About = prerenderedLoadable(() => import("./About"));
function App() {
return (
<div className="App">
<header className="App-header">
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
</ul>
<hr />
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/about">
<About />
</Route>
</Switch>
</div>
</Router>
</header>
</div>
);
}
export default App;
Home.js
import React from 'react';
import logo from './logo.svg';
function Home() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Home Page
</p>
</header>
</div>
);
}
export default Home;
About.js
import React from 'react';
import logo from './logo.svg';
function About() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
About Page
</p>
</header>
</div>
);
}
export default About;
Has this been resolved?