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）。 < p> Home：

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链接时，什么也没有发生...... URL改变了，但是Memory组件没有被渲染...... 更新 感谢回复，这是一个可行的版本：

Dashboard -> 删除

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提供的正确组件。

- Mistre83

---

如果您在路由器内存路径中删除“/”会怎样呢？那么该行代码应该改为<Route path='memory' component={Memory} />。 - janpieter_z

Answer 1

尝试使用以下解决方案：

路由：

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

还有'App'组件：

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

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

- pgrekovich

---

以这种方式，当点击"Memory"时，内存页面会显示出来...但是在"全屏"模式下，我失去了作为容器的仪表板和应该放在里面的动态内容... - Mistre83

@Mistre83 嗯，我修复了路由。请现在检查一下。 - pgrekovich

我尝试阅读你的代码并进行了一些更改，最终成功得到了可用版本！（不知道以后会不会遇到其他问题 :D）请在原帖中查看我的更新。 - Mistre83

Answer 2

我认为你的问题在于内存组件的路由路径不需要前导斜杠。除此之外，你的设置和我的一样。

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

- Ben Gale

---

什么都没变，我已经尝试过这种方式了 :( 我注意到的是，如果我直接访问localhost:8080/memory，请求会到达服务器，但页面不会刷新。如果我从链接中进入Memory，则请求不会到达服务器..... - Mistre83