ReactJS - 路由更新链接但不刷新页面

Question

我正在构建一个简单的 ReactJS 页面(我的第一个页面)，但我遇到了路线问题。浏览器栏上的链接已更新(控制台中没有错误)，但页面未刷新:

我的App.js是:

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

仪表板是主页，中间呈现动态内容

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

所以我创建了两个小组件(显示在开头的 Home 和 Memory )

主页:

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

内存:

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

路由器非常简单:

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

当我转到我的家庭服务器(localhost:3000)时，会显示我的主页，但是当我单击Memory时链接没有发生任何事情...网址更改但 Memory组件未渲染...

更新

感谢我的回复，这是一个工作版本:

仪表板 -> 已删除

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>

这样导航将只包含与导航相关的部分(顶部栏和左侧栏)。

路线已更改:

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

现在，当我回家(localhost:3000)时，变量 this.props.children未定义，我渲染了 Home 组件(感谢 {this.props.children || <Home />} )。

在所有其他情况下，我渲染 Link 提供的正确组件

Answer 1

尝试这个解决方案:

路线:

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

和“应用程序”组件:

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

别忘了，您需要连接应用程序中的“Home”组件。我可以向您发送完整的工作示例。