CODEWITHSUNDEEP
reactjsreact-router
Jack Allan
Jack Allan

Reputation: 15014

Basic hello world with react-router and webpack not working

I have a very simple Webpack configuration (using react-slingshot https://github.com/coryhouse/react-slingshot) and a basic hello world with react-router.
Instead of the hello world being rendered I get a noscript tag in the app div.

Here is some of my dependencies from 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 is my 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 is my index.js:

import React from 'react';
import { render } from 'react-dom';
import { Router, Route, browserHistory } from 'react-router';

const RootComponent = () => <div>Hullo World?</div>;

render(
  <Router history={browserHistory}>
    <Route path="/" Component={RootComponent} />
  </Router>
  , document.getElementById('app')
);

Here is a snapshot of the elements in the 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 I remove routing the app works fine. Why do I get a noscript tag instead of the expected Hello World div?

Upvotes: 0

Views: 477

Answers (1)

Jack Allan
Jack Allan

Reputation: 15014

The Component attribute should be lowercase

render(
   <Router history={browserHistory}>
     <Route path="/" component={RootComponent} />
   </Router>
   , document.getElementById('app')
);

Upvotes: 1

Related Questions