我正在构建一个简单的 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
提供的正确组件
最佳答案
尝试这个解决方案:
路线:
<Router>
<Route path="/" component={App} >
<Route path='/memory' component={Memory} />
</Route>
</Router>
和“应用程序”组件:
return (
<div id="container">
<Dashboard/>{this.props.children || <Home />}
</div>
);
别忘了,您需要连接应用程序中的“Home”组件。我可以向您发送完整的工作示例。
关于ReactJS - 路由更新链接但不刷新页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35747410/