我是一个有用的助手,可以将文本翻译成中文。
正在构建一个简单的ReactJS页面(我的第一个),但在路由方面遇到了问题。浏览器栏中的链接已更新(控制台没有错误),但页面没有刷新:
我的 `App.js` 如下:
仪表板是主页,在中间呈现动态内容的页面。
所以我创建了两个小组件(
记忆:
路由器非常简单:
当我访问我的主页服务器(localhost:3000)时,我的首页会显示出来,但是当我点击
Dashboard -> 删除
App.js
现在,当我访问主页(localhost:3000)时,变量
在所有其他情况下,我会渲染由
正在构建一个简单的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
提供的正确组件。
<Route path='memory' component={Memory} />
。 - janpieter_z