React router navigation does not work

Question

I have implemented a react JS test application with react router in ES6 but it does not seem to work. The code snippet i below:

app.js
-------

import React from 'react';
import ReactDOM from 'react-dom';
import Routes from './routes';

ReactDOM.render(Routes, document.getElementById('react-container'));

routes.js
---------

import React from 'react';
import { DefaultRoute, Link, Route, RouteHandler,Router } from 'react-router';
import Page1 from './page1';
import Home from './home';
import { IndexRoute } from 'react-router';

let routes = 
  <Router>
    <Route path="/" component={Home}>
      <Route path="page1" component={ Page1 }/>
    </Route>
  </Router>

export default routes

home.js
-------

import React, { Component } from 'react';
import Header from './components/header';

export default class Home extends Component {
  constructor() {
    super();
  } 

  render() {
    return (
      <div>
        <Header />
        {this.props.children}
      </div>
    );
  }
}

page1.js
--------

import React, { Component } from 'react';

export default class Page1 extends Component {
  constructor() {
    super();
  } 

  render() {
    return (
      <div>
        <h1> Page 1 </h1>
      </div>
    );
  }
}

Navigating to "/" and "/page1" seem to land in a page indicating the header section alone. Any help appreciated.

Answer 1

It sounds like you want to render page1 to show up when navigating to /? If so, the docs seem to indicate that you'll need an IndexRoute to have / route to page1 by default:

let routes = (
  <Router>
    <Route path="/" component={Home}>
      <IndexRoute component={Page1} />
    </Route>
  </Router>
);

Answer 2

I was not able to test this, but I think that without providing a history, react-router won't be able to read the URL location. So it would make sense for it to only render the / path.

<Router history={browserHistory}>
...
</Router>