React Component not rendering on using react router 4

Question

I am working on a simple demo React project. I have a Home component which gets rendered when directly placed in main.js but when placed inside the Router in Routes.js , it is not rendered. Can anyone let me know what am I doing wrong here?

main.js file

import React from "react";
import {render} from "react-dom";
import {App} from "./app/App";
import Routes from "./app/Routes";

render( <Routes />,
    document.getElementById("root")
)

Routes.js file

import React from "react";

import {
   BrowserRouter as Router,  
   Route, 
    Switch,
    } from "react-router-dom";

import {App} 
    from "./App";

import Home from "./components/Home";

export default function Routes(props) {

    console.log('Routes');
    return (
        <Router>
            <App>
                <Switch>
                    <Route path="/" exact  component={Home} />
                </Switch>  
            </App>
       </Router>
    )
}

App.js file

import React from "react";
import Header from "./components/Header";

export class App extends React.Component {

    render() {
        console.log("App render");

        return (
            <div>
                <h1> Welcome to React </h1>
                <Header/>
            </div>          
        )      
    }
}

Header.js file

import React, {Component} from 'react';
import {NavLink} from 'react-router-dom';

export default class Header extends Component {

    render() {
        console.log("Header render");

        return (
            <div>
                <NavLink to="/" exact>
                    Home
                </NavLink>                                   
            </div>
       )
    }
}

Home.js file

import React, {Component} from "react";

export default class Home extends Component {

    render() {
        console.log("Home render");

        return (
            <div> 
                <h2>Hello World!</h2>
            </div>
        )
    }
} 

Answer 1

This is because you are using App component as the wrapper of whole app, and defined the Switch as the children of App component, so you need to use this.props.children inside App.

Like this:

export class App extends React.Component {
    render() {
        console.log("App render");
        return (
            <div>
                <h1> Welcome to React </h1>
                <Header/>
                {this.props.children}
            </div>          
        )  
    }
}

Consider this example to make the whole picture more clear, if you write:

<App>
   <Home />
</App>

Means Home will get passed as children to App component, automatically it will not get rendered inside App, you need to put this.props.children somewhere inside App.

Answer 2

With react-router-v4 which you seem to be using, it is possible to have dynamic Routing which means you can add the Routes within nested components and hence apart from the solution that @MayankShukla suggested you could also keep the <Switch> and other routes within App like

export default function Routes(props) {

    console.log('Routes');
    return (
        <Router>
            <App/>
       </Router>
    )
}

export class App extends React.Component {

    render() {
        console.log("App render");

        return (
            <div>
                <h1> Welcome to React </h1>
                <Header/>
                <Switch>
                    <Route path="/" exact  component={Home} />
                </Switch>  
            </div>          
        )      
    }
}

You could read more about the advantages of Dynamic Routing here