[英]React: How to change position of footer component depending on route
I have a simple footer component.我有一个简单的页脚组件。 It is used in about and support pages.
它用于关于和支持页面。 In my sass, I have set the
position
to relative
.在我的 sass 中,我已将
position
设置为relative
。
I want to change this position
based on the route.我想根据路线改变这个
position
。 If it's /about
then position: relative and it's /support
then position: fixed.如果它是
/about
那么 position: relative 并且它是/support
那么 position: fixed。
Is it possible to achieve this?有可能实现这一目标吗?
function GeneralFooter() {
return (
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
<div class="footer-pad">
<ul class="list-unstyled">
<li>
<a
className="nav-link"
href="*"
target="_blank"
rel="noopener noreferrer"
>
Help
</a>
</li>
</ul>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
<div class="footer-pad">
<ul class="list-unstyled">
<li className="nav-item">
<NavLink to="/about" className="nav-link">
<span>About</span>
</NavLink>
</li>
</ul>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
<div class="footer-pad">
<ul class="list-unstyled">
<li className="nav-item">
<NavLink to="/support" className="nav-link">
<span>Support</span>
</NavLink>
</li>
</ul>
</div>
</div>
</div>
</div>
);
}
I'm not sure if you are using any libraries, but without, you can use the following code.我不确定您是否正在使用任何库,但如果没有,您可以使用以下代码。
Using the style
prop:使用
style
道具:
function GeneralFooter() {
const location = useLocation();
const pathName = location.pathname;
return (
<div
className="container"
style={{
position: pathName === '/about' ? 'relative' : pathName === '/support' ? 'fixed' : 'inherit'
}}
>
...
Using the className
prop使用
className
道具
.footer--about {
position: relative;
}
.footer--support {
position: fixed;
}
function GeneralFooter() {
const location = useLocation();
const pathName = location.pathname;
const extraClassName = pathName === '/about' ? 'footer--about' : pathName === '/support' ? 'footer--support' : '';
return (
<div
className={`container ${extraClassName}`}
>
...
With classNames dependency:使用classNames依赖项:
function GeneralFooter() {
const location = useLocation();
const rootClassName = classNames('container', {
'footer-about': location.pathname === '/about',
'footer-support': location.pathname === '/support',
});
return (
<div className={rootClassName}>
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.