我正在构建一个简单的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
链接时,没有任何 react ... url发生变化,但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)时, undefined variable
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>
);
别忘了,您需要在App中连接“家庭”组件。我可以向您发送完整的工作示例。