CODEWITHSUNDEEP
reactjsreact-router
user7628486
user7628486

Reputation:

Nested Components in React Router v4

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?

Upvotes: 1

Views: 256

Answers (2)

Mayank Shukla
Mayank Shukla

Reputation: 104369

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')
);

Upvotes: 1

Asmaa Almadhoun
Asmaa Almadhoun

Reputation: 299

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')
);

Upvotes: 0

Related Questions