[HELP] 🙏 react-snap not working with react-router

[tetrachrome]

Hi,

I have a vanilla React app created with CRA, and on top of it with react-router. My App.js is essentially as follows:

export default function App() {
  return (
      <Router>
        <Switch>
          <Route exact path='/history'>    // History page
            <HistoryPage
              appConfig={config}
            />
          </Route>
          <Route exact path='/biology'>   // Biology page
            <BiologyPage
              appConfig={config}
            />
          </Route>
          <Route exact path='/ecology'>   // Ecology page
            <EcologyPage
              appConfig={config}
            />
          </Route>
          <Route exact path='/future'>     // Future page
            <FuturePage
              appConfig={config}
            />
          </Route>
          <Route exact path="/" >              // home page
            <HomePage
              appConfig={config}
            />
         </Route>
        </Switch>
    </Router>
  );
}

The structure of the site is very simple. Before I tried to adopt react-snap, going to / would land me at the home / landing page, going to /biology would land me at the "Biology" page, and going to /history would land me at the "History" page, etc.

Now, after I followed the instructions in the README.md, when built my app and test locally at localhost:5000, I would always land at the home page no matter what url I enter into the browser. A proof of that would be:

> curl http://localhost:5000/biology  --head
HTTP/1.1 200 OK
Content-Length: 6719
Content-Disposition: inline; filename="index.html"
Accept-Ranges: bytes
ETag: "25f8b34870c1b197f0e1edf49dd6bda1ac3e646a"
Content-Type: text/html; charset=utf-8
Vary: Accept-Encoding
Date: Sat, 22 Aug 2020 04:21:32 GMT
Connection: keep-alive

I'd expect NOT get the index.html, but get the compiled static build/biology/index.html, which is there.

The static compile indeed worked.

✅  crawled 1 out of 6 (/)
⚠️  warning: 404 page title does not contain "404" string
✅  crawled 2 out of 6 (/404.html)
✅  crawled 3 out of 6 (/history)
✅  crawled 4 out of 6 (/ecology)
✅  crawled 5 out of 6 (/biology)
✅  crawled 6 out of 6 (/future)

---

I'm on pretty much the latest of everything, and nothing special besides that.

"react": "16.13.1",
"react-dom": "16.13.1",
"react-router-dom": "5.2.0",
"react-scripts": "^3.4.3",
"react-snap": "^1.23.0",

I spent almost 4 hours on this after a bunch Googling and Stackoverflowing, but still stuck 😢.

The current version of the site is live at https://www.hope4cheetahs.org/. If you go to the site you'll see the structure, it's very straightforward.

Any help/pointer would be much appreciated. I really want to use react-snap. Thanks a ton in advance!!! 🙏🙏🙏

[tetrachrome]

Nevermind, I figured it out.

[pipaliyachirag]

how you figured this issue?

[renchris]

Hi @tetrachrome. Would you mind sharing how you fixed this? I am having the exact same issue. Thanks in advance and great Cheetah Museum website :)

[Franklyn-S]

@tetrachrome what did u do to solve the issue? Having the same issue here.

[BlazeIsClone]

I'm also having the same issue no matter which page I'm in react-snap will hydrate from the index page instead of the requested page. React snap builds the index files correctly as well the issue happens with the hydration. I'm using react-router v6.

[calmchang]

add reactSnap options in package.json

like this:

"reactSnap": {
    "include": [ // this is routes that you want to render
      "/",
      "/about"
    ]
  },

[komxvl]

I'm also having the same issue no matter which page I'm in react-snap will hydrate from the index page instead of the requested page. React snap builds the index files correctly as well the issue happens with the hydration. I'm using react-router v6.

Hi @BlazeIsClone. Did you resolve your issue?

[BlazeIsClone]

I'm also having the same issue no matter which page I'm in react-snap will hydrate from the index page instead of the requested page. React snap builds the index files correctly as well the issue happens with the hydration. I'm using react-router v6.

Hi @BlazeIsClone. Did you resolve your issue?

No actually ended up porting the application to NextJS. Apart from having to redo the routing and the data fetching layer. NextJS also provides pre-rendering out of the box aswell.

[komxvl]

Thanks for your time, but NextJS doesn't work for me, i need to convert to ssg my react app((