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

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}>
      ...