stereobooster / react-snap

👻 Zero-configuration framework-agnostic static prerendering for SPAs
MIT License
5.04k stars 391 forks source link

react-snap doesn't work properly with react-router-dom #448

Open KNaved opened 4 years ago

KNaved commented 4 years ago

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;
willsmanley commented 3 years ago

Has this been resolved?