首页 文章

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

提问于
浏览 次
5

我正在构建一个简单的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 链接时没有发生任何事情......网址更改但 Memory 组件未呈现...

UPDATE

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

仪表板 - >已删除

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

reactjs

2 回答

  • 2

    尝试此解决方案：

    路线：

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

    和'App'组件：

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

    不要忘记，您需要在App中连接“Home”组件 . 我可以寄给你全部工作的例子 .

    回复于
  • 0

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

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

相关问题