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）时，会显示 HOMEPAGE ，但是当我点击Memory链接时，没有任何事情发生...网址更改但{{1} }组件未呈现...

更新

感谢我的回复，这是一个有效的版本：

信息中心 - ＆gt;删除

App.js

Memory

这样导航将仅包含相对于导航的部分（顶部栏和左侧栏）。

路线已更改：

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

现在当我回家（localhost：3000）时，变量<Route> <Route path='/' component={App}> <Route path='/memory' component={Memory} /> </Route> </Route>未定义，我呈现Home组件（感谢this.props.children）。

在所有其他情况下，我渲染由{this.props.children || <Home />}

提供的正确组件

Answer 1

试试这个解决方案：

路线：

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

和＆＃39; App＆＃39;组件：

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

别忘了，你需要连接家庭＆＃39; App中的组件我可以向你发送完整的工作实例。

Answer 2

我认为您的问题是内存组件的路径路径不需要前导斜杠。除此之外，您的设置与我的相同。

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

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

2 个答案: