在ReactJS中更改其他路由上的导航栏背景颜色

import React, { useState, useEffect } from 'react';
import { Link, useLocation } from 'react-router-dom';

const Navbar = () => {
  const [backgroundColor, setBackgroundColor] = useState('white');
  const location = useLocation();

  useEffect(() => {
    // 根据当前路由的信息来更新导航栏的背景颜色
    if (location.pathname === '/about') {
      setBackgroundColor('blue');
    } else if (location.pathname === '/contact') {
      setBackgroundColor('green');
    } else {
      setBackgroundColor('white');
    }
  }, [location]);

  return (
    <nav style={{ backgroundColor }}>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/contact">Contact</Link>
        </li>
      </ul>
    </nav>
  );
};

export default Navbar;