我正在创建一个投资组合网站,在这种设计中,我拥有整个网站的背景,当内容在其上滚动时,背景将保持不变。导航栏也已修复,并在其下方滚动了内容。
这种设计看起来很酷,并且组装起来也不太困难,但是我在将React Routing集成到这种组合中时遇到了一些麻烦。
根据我的收集,这些教程说要创建一个App-Router组件,基本上看起来就像他们说“ Navbar”的方式一样。因此,我做到了,然后将Navbar路由到我的主页和“关于我”组件页面。但是,由于我的导航栏是固定的,因此所有页面都拒绝滚动,这意味着它们被包含在导航栏组件中。这与我想发生的事情相反。
我的理想设置是让导航栏(它是其自己的组件)向“路由”组件发送路由请求,然后路由组件将呈现该组件(“导航栏”,仍包含在包含背景的应用容器中)。
到目前为止,这是我结构中的一些伪代码(错误代码):
App.js
<div className="App">
<Navigation />
{/* <other components to render here /> */}
</div>
App.css
background-image: url(blah);
background-attachment: fixed;
z-index: -1;
Navigation.js
<Router>
<div className="App-navigation">
<Container>
<Row>
<Link to="/">Home</Link>
<Link to="/About">About Me</Link>
</Row>
</Container>
<Route path="/" exact component={Home} />
<Route path="/About" component={About} />
</div>
</Router>
Navigation.css
.App-navigation {
// blah blah
position: fixed;
z-index: 10;
}
About.js和Home.js仅具有各自的页面内容。
使用上述方法,即使“主页”的内容比页面高度还多,显然包含导航栏的固定位置也会阻止滚动。
我对React还是很陌生,所以我不确定设置应用程序路由组件的正确过程,也不知道它应该适合应用程序体系结构的位置。任何帮助或指导表示赞赏!
答案 0 :(得分:0)
两种快速解决方案。
1#在路由器中仅创建2个组件:app / portfolio和PageNot Found。延迟加载组件,您不想立即加载。像关于组件。唯一的缺点是,如果您继续,URL不会更改。
2#只需在其他每个页面/组件中导入Navbar组件,或使用HOC模式,基本上可以得到相同的结果。
答案 1 :(得分:0)
您只需要稍微调整一下结构即可确保路线/视图/组件在组件Navigation
之外呈现。移动Router
可以包装App
的大多数子项(如果不是全部子项)。从Route
中删除Navigation
元素,因为Route
是呈现每个路径/视图/组件内容的位置。将已删除的Route
元素移到Navigation
外部和Router
内部的某个其他组件。
应用程序:
<div className="App">
<Router>
<Navigation />
<Main /> {/* component for rendered components */}
</Router>
</div>
导航:
<div className="App-navigation">
<Container>
<Row>
<Link to="/">Home</Link>
<Link to="/About">About Me</Link>
</Row>
</Container>
</div>
主要:
<div className="App-main">
<Container>
<Route path="/" exact component={Home} />
<Route path="/About" component={About} />
</Container>
</div>
这里是example的动作。
希望有帮助!