{"action":"created","issue":{"url":"https://api.github.com/repos/reactjs/react-router/issues/3116","repository_url":"https://api.github.com/repos/reactjs/react-router","labels_url":"https://api.github.com/repos/reactjs/react-router/issues/3116/labels{/name}","comments_url":"https://api.github.com/repos/reactjs/react-router/issues/3116/comments","events_url":"https://api.github.com/repos/reactjs/react-router/issues/3116/events","html_url":"https://github.com/reactjs/react-router/issues/3116","id":135853112,"number":3116,"title":"onEnter async hook creates noscript tag on client side, SSR doesn't match with it","user":{"login":"AVVS","id":1713617,"avatar_url":"https://avatars.githubusercontent.com/u/1713617?v=3","gravatar_id":"","url":"https://api.github.com/users/AVVS","html_url":"https://github.com/AVVS","followers_url":"https://api.github.com/users/AVVS/followers","following_url":"https://api.github.com/users/AVVS/following{/other_user}","gists_url":"https://api.github.com/users/AVVS/gists{/gist_id}","starred_url":"https://api.github.com/users/AVVS/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/AVVS/subscriptions","organizations_url":"https://api.github.com/users/AVVS/orgs","repos_url":"https://api.github.com/users/AVVS/repos","events_url":"https://api.github.com/users/AVVS/events{/privacy}","received_events_url":"https://api.github.com/users/AVVS/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":5,"created_at":"2016-02-23T20:20:33Z","updated_at":"2016-04-08T16:20:54Z","closed_at":"2016-02-23T20:39:18Z","body":"<!--\r\nThank you for contributing!\r\n\r\nHave a usage question?\r\n======================\r\nQuestions will be closed without comment. Here are some resources to get help:\r\n\r\n- Do the tutorial: https://github.com/reactjs/react-router-tutorial\r\n- Read the docs: https://github.com/reactjs/react-router/tree/latest/docs\r\n- Explore examples: https://github.com/reactjs/react-router/tree/latest/examples\r\n- Look for/ask questions on stack overflow: https://stackoverflow.com/questions/ask?tags=react-router\r\n- Ask in chat: https://discord.gg/0ZcbPKXt5bYaNQ46\r\n\r\n\r\nThink you found a bug?\r\n======================\r\nThe best bug report is a failing test in the repository as a pull request. Otherwise, please use the \"BUG REPORT\" template below.\r\n\r\n\r\nHave a feature request?\r\n=======================\r\nRemove the template from below and provide thoughtful commentary *and code samples* on what this feature means for your product. What will it allow you to do that you can't do today? How will it make current work-arounds straightforward? What potential bugs and edge cases does it help to avoid? etc. Please keep it product-centric.\r\n-->\r\n\r\n<!-- BUG TEMPLATE -->\r\n## Version\r\n2.0.0\r\n\r\n## Test Case\r\nhttp://jsbin.com/sacerobuxi/edit?html,js,output\r\n\r\n## Steps to reproduce\r\n\r\n```js\r\nconst RequireLogin = store => nextState => {\r\n  const { user } = store.getState().auth;\r\n\r\n  if (__SERVER__ && !user) {\r\n    debug('no user: 403');\r\n    nextState.location.state = { ...nextState.location.state, responseStatus: 403 };\r\n  }\r\n};\r\n\r\nconst UserLoad = (store, http) => (nextState, replaceState, next) => {\r\n  const state = store.getState();\r\n  const { auth } = state;\r\n  const { user, jwt } = auth;\r\n\r\n  if (!user && jwt) {\r\n    return store\r\n      .dispatch(verify(http))\r\n      .payload.promise\r\n      .then(() => setImmediate(next));\r\n  }\r\n\r\n  return next();\r\n};\r\n\r\nexport default (store, http) => {\r\n  const requireLogin = new RequireLogin(store);\r\n  const userLoad = new UserLoad(store, http);\r\n\r\n  return (\r\n    <Route path=\"/\" component={CoreLayout} onEnter={userLoad} http={http} >\r\n      { /* Routes requiring login */ }\r\n      <Route onEnter={requireLogin} component={AuthorizedApp} >\r\n        { /* user's own profile */ }\r\n        <IndexRoute component={HomeView} />\r\n\r\n        { /* someones's profile */ }\r\n        <Route path=\"/u/:username\" component={UserContainer} onEnter={/* some hook */ } >\r\n          <IndexRoute component={ProfileView} />\r\n        </Route>\r\n\r\n        { /* view for a given model */ }\r\n        <Route path=\"/m/:filename\" component={ModelContainer} >\r\n          <IndexRoute component={ModelView} />\r\n        </Route>\r\n      </Route>\r\n\r\n      { /* Catch all route */ }\r\n      <Route path=\"*\" component={NotFound} status={404} />\r\n    </Route>\r\n  );\r\n};\r\n```\r\n\r\n```js\r\nimport React, { PropTypes } from 'react';\r\nimport Helmet from 'react-helmet';\r\nimport '../../styles/core.scss';\r\nimport { Navbar, Toast } from '../../components';\r\n\r\nfunction CoreLayout({ children }) {\r\n  return (\r\n    <div className=\"page-container\">\r\n      <Helmet\r\n        title=\"SSR\"\r\n        meta={[\r\n          { charset: 'utf-8' },\r\n          { name: 'viewport', content: 'width=device-width, initial-scale=1' },\r\n        ]}\r\n        link={[\r\n          { href: 'https://fonts.googleapis.com/css?family=Roboto:400,300,500', rel: 'stylesheet', type: 'text/css' },\r\n        ]}\r\n        base={{\r\n          href: __BASENAME__,\r\n        }}\r\n      />\r\n      { /* noscript appears on the client here */ }\r\n      <div className=\"view-container\">\r\n        <Navbar />\r\n        {children}\r\n        <Toast />\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\nCoreLayout.propTypes = {\r\n  children: PropTypes.element,\r\n};\r\n\r\nexport default CoreLayout;\r\n```\r\n\r\n## Expected Behavior\r\n\r\nSSR and client side render match\r\n\r\n## Actual Behavior\r\n\r\nIf async `onEnter` hook is added to `<Route path=\"/u/:username\" component={UserContainer} >` it creates <noscript> tag on client and discards SSR markup. CoreLayout component with onEnter async hook works flawlessly\r\n"},"comment":{"url":"https://api.github.com/repos/reactjs/react-router/issues/comments/207499706","html_url":"https://github.com/reactjs/react-router/issues/3116#issuecomment-207499706","issue_url":"https://api.github.com/repos/reactjs/react-router/issues/3116","id":207499706,"user":{"login":"goldensunliu","id":1348993,"avatar_url":"https://avatars.githubusercontent.com/u/1348993?v=3","gravatar_id":"","url":"https://api.github.com/users/goldensunliu","html_url":"https://github.com/goldensunliu","followers_url":"https://api.github.com/users/goldensunliu/followers","following_url":"https://api.github.com/users/goldensunliu/following{/other_user}","gists_url":"https://api.github.com/users/goldensunliu/gists{/gist_id}","starred_url":"https://api.github.com/users/goldensunliu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/goldensunliu/subscriptions","organizations_url":"https://api.github.com/users/goldensunliu/orgs","repos_url":"https://api.github.com/users/goldensunliu/repos","events_url":"https://api.github.com/users/goldensunliu/events{/privacy}","received_events_url":"https://api.github.com/users/goldensunliu/received_events","type":"User","site_admin":false},"created_at":"2016-04-08T16:20:54Z","updated_at":"2016-04-08T16:20:54Z","body":"@taion yo, which part of the doc would help with figuring out this usage question's answer? https://github.com/reactjs/react-router/issues/3116#issuecomment-187892003"}}