React: How to change position of footer component depending on route - reactjs

Question

I have a simple footer component. It is used in about and support pages. In my sass, I have set the position to relative.
I want to change this position based on the route. If it's /about then position: relative and it's /support then 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>
);
}

Answer 1

I'm not sure if you are using any libraries, but without, you can use the following code.
Using the style prop:
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
.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:
function GeneralFooter() {
const location = useLocation();
const rootClassName = classNames('container', {
'footer-about': location.pathname === '/about',
'footer-support': location.pathname === '/support',
});
return (
<div className={rootClassName}>
...