ReactJS - Route update link but not refresh page

Question

I'm building a simple ReactJS page (my first one) and i'm having an issue with route. Link on browser bar is updated (no errors in console) but the page is not refreshed:

My App.js is:

return(
   <div id="container">
      <Dashboard>{this.props.children}</Dashboard>
   </div>
);

The Dashboard is the main page where the dynamic content is rendered on the middle

 return(
    <!-- code for navbar, sidebar etc -->
      ...
      <Link to="/memory">Memory</Link>
      ....
     <div id="page-wrapper" className="page-wrapper">
        {this.props.children}
     </div>
);

So i have created two small component (Home that is displayed at the beginning and Memory)

Home:

render() {
    return(
       <div className="row">
            HOMEPAGE
        </div>
    );
}

Memory:

  render() {
        return(
           <div className="row">
                MEMORY
            </div>
        );
    }

Router is very simple:

<Route component={App}>
    <Route path='/' component={Home}>
        <Route path='/memory' component={Memory} />
    </Route>
</Route>

When i go to my home server (localhost:3000) my HOMEPAGE is displayed but when i click on Memory link nothing happen... the url change but Memory component is not rendered...

UPDATE

Thanks to the reply i have had this is a working version:

Dashboard -> deleted

App.js

 return(
    <div id="container">
      <div className="content" id="wrapper">
        <Navigation />
        <div id="page-wrapper" className="page-wrapper" >
          {this.props.children || <Home />}
        </div>
      </div>
    </div>

In this way Navigation will contain only the part relative to navigation (top bar and left side bar).

Route has been changed:

<Route>
   <Route path='/' component={App}>
      <Route path='/memory' component={Memory} />
   </Route>
</Route>

Now when i go to home (localhost:3000) , the variable this.props.children is undefined and i render the Home component (thanks to {this.props.children || <Home />}).

In all other cases i render the right component provided by Link

Answer 1

Try this solution:

Routes:

   <Router>
    <Route path="/" component={App} >
      <Route path='/memory' component={Memory} />
    </Route>
   </Router>

And 'App' component:

    return (
      <div id="container">
        <Dashboard/>{this.props.children || <Home />}
      </div>
);

Don't forget, you need to connect 'Home' component in App. I can send you full working example.