React路由切换时如何修改全局常驻Footer组件样式？

先解决useLocation不更新的问题 #

你遇到的useLocation只打印初始URL的问题，大概率是组件不在Router上下文范围内导致的。确保调用useLocation的组件被<BrowserRouter>（或其他Router类型）包裹，且useLocation必须在Router的上下文环境中调用。

方案1：Footer组件内部直接判断路由（推荐） #

不需要父组件传递状态，让Footer自己处理路由判断，耦合度更低，逻辑更清晰：

// Footer.jsx
import { useLocation } from 'react-router-dom';
import './Footer.css';

const Footer = () => {
  const location = useLocation();
  // 定义需要应用特殊样式的页面路径
  const specialPaths = ['/about', '/contact'];
  // 根据当前路径判断是否使用特殊样式类
  const footerClassName = specialPaths.includes(location.pathname) 
    ? 'footer-special' 
    : 'footer-default';

  return (
    <footer className={footerClassName}>
      <p>网站底部信息</p>
    </footer>
  );
};

export default Footer;

对应的CSS文件（Footer.css）：

.footer-default {
  background-color: #ffffff;
  color: #333333;
  padding: 1rem;
  text-align: center;
}

.footer-special {
  background-color: #2c3e50;
  color: #ffffff;
  padding: 2rem;
  text-align: center;
  border-top: 2px solid #3498db;
}

方案2：父组件管理样式状态传递给Footer #

如果需要在父组件统一管理样式逻辑，可以按以下方式实现：

首先确保Router包裹整个应用（比如在index.js中）：

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Router>
    <App />
  </Router>
);

然后在App组件中监听路由变化，设置样式状态并传递给Footer：

// App.jsx
import { Switch, Route, useLocation } from 'react-router-dom';
import { useState, useEffect } from 'react';
import Footer from './Footer';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';

const App = () => {
  const location = useLocation();
  const [footerStyle, setFooterStyle] = useState({});

  useEffect(() => {
    // 根据当前路径切换样式
    if (['/about', '/contact'].includes(location.pathname)) {
      setFooterStyle({
        backgroundColor: '#2c3e50',
        color: '#fff',
        padding: '2rem',
        textAlign: 'center'
      });
    } else {
      setFooterStyle({
        backgroundColor: '#fff',
        color: '#333',
        padding: '1rem',
        textAlign: 'center'
      });
    }
  }, [location.pathname]); // 精准监听路径变化

  return (
    <>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
      <Footer style={footerStyle} />
    </>
  );
};

export default App;

Footer组件接收样式props：

// Footer.jsx
const Footer = ({ style }) => {
  return (
    <footer style={style}>
      <p>网站底部信息</p>
    </footer>
  );
};

export default Footer;

关键注意点 #

• 确保useLocation的调用位置在Router上下文内部，否则无法获取实时路由信息。
• 监听路由变化时，优先使用location.pathname作为useEffect的依赖项，比整个location对象更精准。
• 推荐使用CSS类名控制样式，比内联样式更易于维护和扩展。

内容的提问来源于stack exchange，提问作者ABC