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