React attempted to reuse markup in a container but the checksum was invalid

[fortezhuo]

I try to learn ant design, and try to write Header Component like below example:
I get that example from ant design web.

import React from 'react'
import { Row, Col, Icon, Menu, Dropdown } from 'antd'
import { Link } from 'react-router'

const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
const Header = React.createClass({
  handleClick(){

  },
  render() {
    return (
      <div className='ant-layout-header'>
        <Menu className="header-menu" onClick={this.handleClick}
        mode="horizontal">
          <SubMenu title={<span><Icon type="user" />User Name</span>}>
            <Menu.Item key="setting1">Setting 1</Menu.Item>
            <Menu.Item key="setting2">Setting 2</Menu.Item>
            <Menu.Divider />
            <Menu.Item key="setting3">Setting 3</Menu.Item>
          </SubMenu>
          <Menu.Item key="mail">
            <Icon type="question" />Question
          </Menu.Item>
        </Menu>
      </div>
    );
  }
});

export default Header;

And when I run on webpack dev server, an warning displayed

main.js:2066 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) aria-owns="1468645772878_0" aria-haspopu
 (server) aria-owns="1468645771485_1" aria-haspopuwarning @ main.js:2066
main.js:9964 [HMR] connected

[afc163]

Need reproduce repository.

[fortezhuo]

You can find my repository on this link : https://github.com/hedikasmanto/oke-bingit. After clone, and npm install, please run "npm run dev"

[RaoHai]

I think you have rendered your client twice..

Once is in HTML.js, you did a server rendering, and used dangerouslySetInnerHTML to put the component into a div immediately: https://github.com/hedikasmanto/oke-bingit/blob/master/src/server/components/Html.js#L22

Another is here: https://github.com/hedikasmanto/oke-bingit/blob/master/src/client/index.js#L17, you used ReactDom.render to render your client into #root again.

Server rendered component had a attribute called data-react-checksum, and ReactDom.render didn't, so it cause the warning.

May it helpful.

[fortezhuo]

That client code only render routing, that used for webpack compiling. And I have tried another UI like react-bootstrap with same code, and it can be rendered without checksum warning. But can ant.design provide some example that using SSR and react router or maybe ant-design boilerplate ?

[afc163]

We are no supporting SSR completly yet. #215

But we love to seeing contributions about SSR, you can help us at this by giving PR directly. 😄

[afc163]

closed in react-component/menu#55

[lock]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.