如何根据页面url react js改变背景？

npm install react-router-dom

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}

export default App;

import React, { useEffect } from 'react';

function Home() {
  useEffect(() => {
    const handleBackgroundChange = () => {
      // 获取当前URL
      const currentUrl = window.location.pathname;
      
      // 根据URL设置背景
      if (currentUrl === '/') {
        document.body.style.background = 'red';
      } else if (currentUrl === '/about') {
        document.body.style.background = 'blue';
      }
    };

    // 监听URL变化
    window.addEventListener('popstate', handleBackgroundChange);

    // 组件卸载时移除监听器
    return () => {
      window.removeEventListener('popstate', handleBackgroundChange);
    };
  }, []);

  return (
    <div>
      <h1>Home</h1>
    </div>
  );
}

export default Home;