react-router-tutorial icon indicating copy to clipboard operation
react-router-tutorial copied to clipboard

Published 20 hours ago • verified publisher icon reactjs

Lesson 13 - Rending HTML for root path ('/')

Open pisrael opened this issue 9 years ago • 2 comments
trafficstars

Following the lesson 13 tutorial I wasn't able to render the full server side HTML for the root path ('/'). This is a very important thing for apps that relies on SEO.

The router: screen shot 2016-10-04 at 10 28 22 pm

The server code: screen shot 2016-10-04 at 10 27 59 pm

The result for the URL localhost:8080 screen shot 2016-10-04 at 10 27 32 pm

Just as a benchmark, when requesting localhost:8080/about it works screen shot 2016-10-04 at 10 33 02 pm

How could I fix this issue using ReactRouter and also get the full HTML for the root path?

[UPDATE] I was able to fix it myself.

The solution is to delete index.html from the public folder. I suggest in the tutorial to ask the reader to delete his index.html once server side rendering is completed.

pisrael avatar Oct 05 '16 01:10 pisrael

This should be fixed by this: https://github.com/reactjs/react-router-tutorial/pull/271

rajaraodv avatar Dec 12 '16 22:12 rajaraodv

I ran into this same issue. When I fixed the issue (either deleting index.html or as described in #271 ) whenever I follow any link in the app, the server is called to rerender the page.

edit: I found the problem... a missing quote mark in the renderPage() function. Oy...

Also I noticed that in project 14 webpack.server.config.js is edited and node: __dirname and __filename are set to false instead of true. I don't know why but the inconsistency is confusing.

maquino1985 avatar Jan 26 '17 20:01 maquino1985