ReactJS - route update link, but not an updated page

Question

I am building a simple ReactJS page (my first) and I have a problem with the route. The link to the browser panel is updated (there are no errors in the console), but the page is not updated:

My App.js :

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

The toolbar is the main page where dynamic content is displayed in 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 created two small components ( Home , which appears at the beginning and Memory )

home

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

Memory:

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

The 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 the Memory link, nothing happens ... the URL changes, but the Memory component fails ...

UPDATE

Thanks to the answer, I had a working version:

Toolbar → 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> 

Thus, the navigation will contain only part of the navigation (top panel and left panel).

Route changed:

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

Now when I go to the homepage (localhost: 3000), the variable this.props.children is undefined and I am pulling out the Home component (thanks {this.props.children || <Home />} ).

In all other cases, I make 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 the component "App":

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

Do not forget that you need to connect the Home component in the application. I can send you a complete working example.

Answer 2

I think your problem is that the route path for your memory component does not require a leading slash. In addition, your installation is the same as mine.

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