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?

Solution 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/

Solution 2

Ho if you're v4* of react-router it won't work that way you should install react-router-dom and import it.

That's the way I did it

import {BrowserRouter, Route} from 'react-router-dom';


//modified code of yours
ReactDOM.render((
     <BrowserRouter>
       <div>
         <Route path="/" component={App}>
           <IndexRoute component={Home}/>
           <Route path="/home" component={Home}/>
           <Route path="/login" component={Login}/>
           <Route path="/register" component={Register}/>
         </Route>
      </div>
    </BrowserRouter>),
    document.getElementById('root'));

Note: Don't forget to wrap the route in a wrapper or it'll throw an error!

and to set 404 page just provide another route without any path to it.If no routes found it will be rendered.

<Route component={FourOhFour} /> /* FourOhFour component as 404*/

** Bonus point If you're new to react-router you may fall in a problem of rendering multiple routes at the same time. But you want to render only one route at a time. at this point.

/*Import Switch also*/
import {BrowserRouter, Route, Switch} from 'react-router-dom';

Then

/*Wrap your route with `Switch` component*/
<BrowserRouter>
    <div>
        <Switch>
            <IndexRoute component={Home}/>
            <Route path="/" component={App}/>
            <Route path="/home" component={Home}/>
            <Route path="/login" component={Login}/>
            <Route path="/register" component={Register}/>
         </Switch>
    </div>
</BrowserRouter>