React-router-dom -Same route issue

Question

I am new in the react js framework and I am current doing a navigation but I've encounter a problem regarding my routes. Here's my components from newly installed react js.

Index.js

 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
 import registerServiceWorker from './registerServiceWorker';
 import 'bootstrap/dist/css/bootstrap.min.css';


ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

App.js

import React, { Component } from 'react';
import './App.css';
import Routes from './routes';

class App extends Component {
  render() {
    return (
      <div>
        <Routes/>
      </div>
    );
  }
}
export default App;

src/routes/index.js

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

import Root from '../components/Root';
import Home from '../components/Home';
import About from '../components/About';
import Contact from '../components/Contact';

export default() =>(
<BrowserRouter>
    <Switch>
        <Route exact path="/" component={Root}>
            <Route exact path="/home" component={Home}/>
            <Route exact path="/about" component={About}/>
            <Route exact path="/contact" component={Contact}/>
        </Route>
    </Switch>
</BrowserRouter>
)

src/components/Root.js

import React, { Component } from 'react';

import Header from './Header';

class Root extends Component {
  render() {
    console.log(this.props)
    return (
        <div>
            <div>
                <Header/>
            </div>
            <div>
                {this.props.children}
            </div>
        </div>
    );
  }
}
export default Root;

src/components/Header.js

import React, { Component } from 'react';
import {Navbar} from 'reactstrap';

class Header extends Component {

  render() {
    return (
        <div>
            <Navbar color="light" light expand="md">
                //navbar html code here
            </Navbar>
        </div>  
    );
  }
}
export default Header;

index.js:2178 Warning: You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored

this is my problem here.

Answer 1

I think your warning is missing some information as SO seems to have removed the XML like tags.

Looking at the code though, I am pretty sure the warning is supposed to say:

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

The problem is you have put some of your Routes as "children" of another route. You don't need to do that.

<Switch>
    <Route exact path="/" component={Root}>
        <Route exact path="/home" component={Home}/>
        <Route exact path="/about" component={About}/>
        <Route exact path="/contact" component={Contact}/>
    </Route> // This is the problem, you don't need to enclose this.
</Switch>

You don't need to enclose the Routes as they are all exact and will always match the component with the path.

<Switch>
    <Route exact path="/" component={Root} />
    <Route exact path="/home" component={Home}/>
    <Route exact path="/about" component={About}/>
    <Route exact path="/contact" component={Contact}/>
</Switch>

Answer 2

This is always work for me

Nested Routes in React Router v4