React：如何根据路线更改页脚组件的位置

Question

我有一个简单的页脚组件。它用于关于和支持页面。在我的 sass 中，我已将 position 设置为 relative。

我想根据路线更改此position。如果是 /about 则 position: relative 和 /support 则 position: fixed。

有可能实现吗？

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

我不确定您是否使用了任何库，但如果没有，您可以使用以下代码。

使用style 属性：

function GeneralFooter() {
  const location = useLocation();
  const pathName = location.pathname;

  return (
    <div 
      className="container" 
      style={{ 
        position: pathName === '/about' ? 'relative' : pathName === '/support' ? 'fixed' : 'inherit' 
      }}
    >
      ...

使用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}`}
    >
      ...

带有classNames 依赖：

function GeneralFooter() {
  const location      = useLocation();
  const rootClassName = classNames('container', {
    'footer-about': location.pathname === '/about',
    'footer-support': location.pathname === '/support',
  });

  return (
    <div className={rootClassName}>
      ...