reactjs - Basic hello world with react-router and webpack not working -
i have simple webpack configuration (using react-slingshot https://github.com/coryhouse/react-slingshot) , basic hello world react-router.
instead of hello world being rendered noscript tag in app div.
here of dependencies package.json:
"react": "0.14.6", "react-dom": "0.14.6", "react-redux": "4.0.0", "history": "2.0.0", "react-router": "2.0.0-rc5", here index.html:
<!doctype html> <html lang="en"> <head> <title>routing test</title> </head> <body> <div id="app"></div> <script src="js/bundle.js"></script> </body> </html> here index.js:
import react 'react'; import { render } 'react-dom'; import { router, route, browserhistory } 'react-router'; const rootcomponent = () => <div>hullo world?</div>; render( <router history={browserhistory}> <route path="/" component={rootcomponent} /> </router> , document.getelementbyid('app') ); here snapshot of elements in dom:
<html lang="en"><head> <title>routing test</title> </head> <body> <div id="app"><noscript data-reactid=".0"></noscript></div> <script src="js/bundle.js"></script> </body></html> if remove routing app works fine. why noscript tag instead of expected hello world div?
the component attribute should lowercase
render( <router history={browserhistory}> <route path="/" component={rootcomponent} /> </router> , document.getelementbyid('app') ); 
Comments
Post a Comment