Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

StaticRouter renders incorrect links when using server-side rendering #4511

Closed
pahund opened this issue Feb 10, 2017 · 2 comments
Closed

StaticRouter renders incorrect links when using server-side rendering #4511

pahund opened this issue Feb 10, 2017 · 2 comments

Comments

@pahund
Copy link

pahund commented Feb 10, 2017

Version

4.0.0-beta.5

Test Case

I've created a demo Express app that lets you reproduce the bug:

https://github.com/pahund/universal-react-router4

Run the application using:

npm install && npm run build && npm start

Then point your browser to http://localhost:3000/

The application shows a list of Gists fetched from the GitHub API, similar to the app shown by Ryan in the react-router 4 introduction video.

Expected Behavior

The browser's JavaScript console shows the following warning:

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
(client) actid="3"><a href="/g/c31dde8e3656a8ae44
(server) actid="3"><a href="//g/c31dde8e3656a8ae4

This is due to the following bug in react router:

  • in the client, I'm using BrowserRouter; Link elements for the Gists in the side bar render anchor tags with the correct URLs, e.g. /g/f6230f5eed364763354be7b67e4aa6b7
  • in the server, I'm using StaticRouter; Link elements for the Gists in the side bar render anchor tags with incorrect URLs, they have an additional slash prepended: //g/f6230f5eed364763354be7b67e4aa6b7

This causes the warning from React that the markup rendered on the server differs from that from the client.

When you comment out the client-side rendering of the layout (lines 15-19 in src/client/index.js), you get only the server-side rendered page. When you click on any of the Gist links, you'll see that they are broken due to the prepended slash.

Actual Behavior

The Link element should render the correct URL when using StaticRouter for server-side rendering, without prepending a slash.

@pshrmn
Copy link
Contributor

pshrmn commented Feb 10, 2017

Fixed in #4484

@pshrmn pshrmn closed this as completed Feb 10, 2017
@pahund
Copy link
Author

pahund commented Feb 10, 2017

Confirmed, it works with the latest version of the v4 branch

@lock lock bot locked as resolved and limited conversation to collaborators Jan 20, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants