react-router is not rendering anything

Question

I created my app with create-react-app and trying to use react-router on it. but it's not working at all.

Here's my Header.js.

  import React, { Component } from 'react';

class Header extends Component {
    render() {
        return (
          <nav>
                <div className="nav-wrapper blue darken-1">
                    <a className="brand-logo center">Testing</a>

                    <div className="right">
                        <ul>
                            <li>
                                <a><i className="material-icons">vpn_key</i></a>
                            </li>
                            <li>
                                <a><i className="material-icons">lock_open</i></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        );
    }
}

export default Header;

my App.js.

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

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="Header">
        <Header />
        {this.props.children}
        </div>
      </div>
    );
  }
};

export default App;

and my index.js here.

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, browserHistory, IndexRoute } from 'react-router';
import App from './App';
import Home from './Home';
import Login from './Login';
import Register from './Register';

ReactDOM.render((
  <Router history={browserHistory}>
        <Route path="/" component={App}>
            <IndexRoute component={Home}/>
            <Route path="/home" component={Home}/>
            <Route path="/login" component={Login}/>
            <Route path="/register" component={Register}/>
        </Route>
    </Router>),
  document.getElementById('root')
);

• Don't worry about Home, Login, Register thing on index.js. They are super fine.

Am I doing something wrong?

Answer 1

If you are using React Router 4, as said by other comments, you have to use 'react-router-dom' in order to import it in your component.

import { BrowserRouter as Router } from 'react-router-dom'

you can now give any component as a children of Router (it has to be a single node).

The main difference from the normal RR2-3 is that now every route is a simple component, and you can put it along with other components.

You don't have IndexRoute anymore, you just put the routes in the order you want:

<div>
  <Header />
  <Route path="/blabla/:bla" component={SingleBlaBla} />
  <Route path="/aboutUs" exact component={AboutUs} />
  <Route path="/" exact component={Home} />
  <Footer />
</div>

there are more than a couple of things to understand, in the options of Route, the use of Switch, Redirect and other very useful components. Try to spend some time on some good documentation since it is a very good version, and it will stick around for a while.

If you can have a look at this wonderful introduction: https://egghead.io/courses/add-routing-to-react-apps-using-react-router-v4

and the doc website: https://reacttraining.com/react-router/