I have seen many post related this argument but i'm not able to understand why {this.props.children} is undefined in my application (i'm really new to ReactJS)

Starting with App.js that is my main component i have this:

import React, {Component} from 'react';

import Dashboard from './layouts/Dashboard';



class App extends Component {

    render() {

        return(

            <div id=container>

                <Dashboard />

            </div>

        );

    }

}

So, Dashboard.js have to code to render a top bar and a left-side bar, the dynamic content will go on the center (and this is where i have placed {this.props.children})

Dashboard.js



render() {

    return(

        <div className=content id=wrapper>

            <!-- Navbar and sidebar code -->

            <-- this is the dynamic content -->

            <div id=page-wrapper className=page-wrapper ref=pageWrapper>

                {this.props.children}

            </div>

        </div>

    );

}

The router right now is very simple:

<Route component={App}>

    <Route path='/' component={Home} />

</Route>

I have omitted the code related to Home.js, but this is a simple div that print in statyc way Hello World

Dashboard component is renderd but no Hello World is placed in the part where i have {this.props.children}