React: [react.hydrate] does not match

[HsuTing]

Do you want to request a feature or report a bug?
bug

What is the current behavior?
react.hydrate does not match.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

Component

render() {
  return (
    <div>
      {str1}
      {str2}
    </div>
  );
}

I use react.hydrate to do SSR.
This will show error if str2 is "str2" and str1 is "str1":

Warning: Text content did not match. Server: "str2str1" Client: "str1"

But the client of the html is the same as the server of the html.

What is the expected behavior?
This should not show the Error.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
React: 16.2.0
OS: Mac OS X 10.13.3
Browser: Chrome 63.0.3239.132 (Official Build) (64-bit)

[justinyueh]

I have the same issure too.

    hydrate(
      component,
      document.getElementById('root')
    );

component

export default class Home extends React.Component {
  render() {
    const { location, dispatch } = this.props;
    return (
      <Fragment>
        <h1>Home page.</h1>
        <pre>name:{location.search}</pre>
      </Fragment>
    );
  }
}

warning message

Warning: Text content did not match. Server: "name:?name=hello" Client: "name:"

React version

"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-redux": "^5.0.7",
"react-router-dom": "^4.2.2",
"react-router-redux": "^5.0.0-alpha.9",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0",

[elado]

Make sure you use ReactDOM.renderToString and not renderToStaticMarkup.

https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup

If you plan to use React on the client to make the markup interactive, do not use this method. Instead, use renderToString on the server and ReactDOM.hydrate() on the client.

[gaearon]

Yeah that looks to be the cause.