Nested Components in React Router v4

Question

I want to build a simple weather report app using React Router. This is my code:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, IndexRoute, hashHistory} from 'react-router-dom';
var Main = require('Main');
var Weather = require('Weather');
var About = require('About');

ReactDOM.render(
    <Router history={hashHistory}>
        <Route path="/" component={Main}>
            <Route path="/Weather" component={Weather} />
            <Route path="/About" component={About} />
        </Route>
    </Router>,
    document.getElementById('app')
);

when I try the code above, I get a warning that says:

You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored

And when I change my code to this:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, IndexRoute, hashHistory} from 'react-router-dom';
var Main = require('Main');
var Weather = require('Weather');
var About = require('About');

ReactDOM.render(
    <Router history={hashHistory}>
        <Route path="/" component={Main} />
        <Route path="/Weather" component={Weather} />
        <Route path="/About" component={About} />
    </Router>,
    document.getElementById('app')
);

I get an error that says A <Router> may have only one child element.

What should I do to fix this problem?

Mayank Shukla · Accepted Answer · 2017-05-31 08:14:47Z

1

Wrap all the routes in a div, like this:

ReactDOM.render(
    <Router history={hashHistory}>
        <div>
           <Route path="/" component={Main} />
           <Route path="/Weather" component={Weather} />
           <Route path="/About" component={About} />
        </div>
    </Router>,
    document.getElementById('app')
);

Or use Switch:

ReactDOM.render(
    <Router history={hashHistory}>
        <Switch>
           <Route path="/" component={Main} />
           <Route path="/Weather" component={Weather} />
           <Route path="/About" component={About} />
        </Switch>
    </Router>,
    document.getElementById('app')
);

edited May 31, 2017 at 8:14

answered May 31, 2017 at 8:06

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Asmaa Almadhoun · Accepted Answer · 2017-05-31 08:06:15Z

0

you can fix the second problem to have only one child element by putting for example div tag inside Router and put all your routes in it as the follows

ReactDOM.render(
    <Router history={hashHistory}>
      <div> 
        <Route path="/" component={Main} />
        <Route path="/Weather" component={Weather} />
        <Route path="/About" component={About} />
      </div>
    </Router>,
    document.getElementById('app')
);

answered May 31, 2017 at 8:06

Asmaa Almadhoun

2933 silver badges13 bronze badges

Collectives™ on Stack Overflow

Nested Components in React Router v4

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related