由於在app.jsx 不能使用useLocation 請他生成Navbar元件要使用useLocation更新點擊時按鍵顏色

咒語:app.jsx不能用useLocation 要怎樣增加跟引入Navbar 請給我細節

在你的項目中創建一個名為 Navbar.jsx 的新組件，該組件將用於顯示導航欄

import React from "react";
import { Link, useLocation } from "react-router-dom";
import styled from "styled-components";

const NavWrapper = styled.nav`
  ul {
    list-style-type: none;
    padding: 0;
    display: flex;
    gap: 20px;

    li {
      a {
        text-decoration: none;
        color: white;
      }
    }
  }
`;

function Navbar() {
  const location = useLocation();
  const currentPath = location.pathname;

  return (
       <NavWrapper>
      <ul>
        <li
          style={{
            backgroundColor: pathname === "/" ? "#ccc" : "transparent",
            color: pathname === "/" ? "black" : "white",
          }}
        >
          <Link to="/">首頁</Link>
        </li>
        <li
          style={{
            backgroundColor:
              pathname === "/member" || pathname === "/login"
                ? "#ccc"
                : "transparent",
            color: pathname === "/member" ? "black" : "white",
          }}
        >
          <Link to={AC.token === "1" ? "/member" : "/login"}>
            {AC.token === "1" ? "會員" : "登入"}
          </Link>
        </li>
        <li
          style={{
            backgroundColor: pathname === "/product" ? "#ccc" : "transparent",
            color: pathname === "/product" ? "black" : "white",
          }}
        >
          <Link to="/product">商品頁</Link>
        </li>
        <li
          style={{
            backgroundColor: pathname === "/cart" ? "#ccc" : "transparent",
            color: pathname === "/cart" ? "black" : "white",
          }}
        >
          <Link to="/cart">購物車</Link>
        </li>
        <li
          style={{
            backgroundColor: pathname === "/ChatRoom" ? "#ccc" : "transparent",
            color: pathname === "/ChatRoom" ? "black" : "white",
          }}
        >
          <Link to="/ChatRoom">聊天室</Link>
        </li>
        <li
          style={{
            backgroundColor:
              pathname === "/MessageBoard" ? "#ccc" : "transparent",
            color: pathname === "/MessageBoard" ? "black" : "white",
          }}
        >
          <Link to="/MessageBoard">留言板</Link>
        </li>
        <li
          style={{
            backgroundColor:
              pathname === "/MusicPlayer" ? "#ccc" : "transparent",
            color: pathname === "/MusicPlayer" ? "black" : "white",
          }}
        >
          <Link to="/MusicPlayer">音樂播放器</Link>
        </li>
        <li
          style={{
            backgroundColor:
              pathname === "/WeatherApp" ? "#ccc" : "transparent",
            color: pathname === "/WeatherApp" ? "black" : "white",
          }}
        >
          <Link to="/WeatherApp">天氣應用</Link>
        </li>
      </ul>
    </NavWrapper>
  );
}

export default Navbar;

步驟 2：在 App.jsx 中引入導航欄

import React, { useState } from "react";
import {
  BrowserRouter as Router,
  Route,
  Routes,
  Link,
} from "react-router-dom";
import { AppBar, Toolbar, Typography, Container } from "@mui/material";
import styled from "styled-components";
import Home from "./pages/home";
import Login from "./pages/login";
import Member from "./pages/member";
import Product from "./pages/product";
import Cart from "./pages/cart";
import ChatRoom from "./pages/chat";
import MessageBoard from "./pages/messageboard";
import MusicPlayer from "./pages/MusicPlayer";
import WeatherApp from "./pages/WeatherApp";
import UserProfile from "./pages/UserProfile";
import Survey from "./pages/Survey";
import Navbar from "./Navbar"; // 引入导航栏组件

const AppWrapper = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
`;

// ...（省略了其他部分）

function App() {
  const [token, setToken] = useState(localStorage.getItem("token"));
  const [cart, setCart] = useState([]);

  return (
    <AllContext.Provider value={{ cart, setCart, token, setToken }}>
      {" "}
      {/* 使用 CartProvider 包裹整個應用 */}
      <Router>
        <AppBar position="static">
          <Toolbar>
            <Typography variant="h6" mr={2}>
              鐵人賽
            </Typography>
            <Navbar />
          </Toolbar>
        </AppBar>
        <Container>
          <AppWrapper>
            <Routes>
              {/* ...（省略了其他部分） */}
            </Routes>
          </AppWrapper>
        </Container>
      </Router>
    </AllContext.Provider>
  );
}

export default App;

這樣就可以根據上頭的path 改變link的顏色了