向导航栏添加路由（反应和顺风）

Question

import { useState } from "react";
const App = () => {
  const [open, setOpen] = useState(true);
  const Menus = [
    { title: "Home", src: "0" },
    { title: "Site1", src: "1", gap: true },
    { title: "Site2 ", src: "2" },
    { title: "Site3", src: "3" },
    { title: "Site4", src: "4" }
  ];

  return (
    <div className="flex">
      <div
        className={` ${
          open ? "w-72" : "w-20 "
        } bg-gray-800 p-5  pt-8 sticky top-0 left-0 h-[930px] duration-300`}
      >
        <img
          src="./src/assets/control.png"
          className={`absolute cursor-pointer -right-3 top-9 w-7 border-dark-purple
           border-2 rounded-full  ${!open && "rotate-180"}`}
          onClick={() => setOpen(!open)}
        />
        <div className="flex gap-x-4 items-center">
          <img
            src="./src/assets/logo.png"
            className={`cursor-pointer duration-500 ${
              open && "rotate-[360deg]"
            }`}
          />
          <h1
            className={`text-white origin-left font-medium text-xl duration-200 ${
              !open && "scale-0"
            }`}
          >
            Site
          </h1>
        </div>
        <ul className="pt-6">
          {Menus.map((Menu, index) => (
            <li
              key={index}
              className={`flex  rounded-MD p-2 cursor-pointer hover:bg-light-white text-gray-300 text-sm items-center gap-x-4 
              ${Menu.gap ? "mt-9" : "mt-2"} ${
                index === 0 && "bg-light-white"
              } `}
            >
              <img src={`./src/assets/${Menu.src}.png`} />
              <span className={`${!open && "hidden"} origin-left duration-200`}>
                {Menu.title}
              </span>
            </li>
          ))}
        </ul>
      </div>

这是我在完成本教程后得到的代码：教程

如何将我的其他页面与导航栏链接？ 因此，例如单击 Site1 会将用户定向到 Site1？

问题是在这种情况下我不能使用标签或 hfref 并且我不知道如何解决我的问题，因为我只是在学习反应。

Answer 1

查看并阅读 React-router： https://reactrouter.com/en/main/getting-started/tutorial

要创建链接，请使用标签而不是标签

Answer 2

您可以在这里做很多事情。 如果你想坚持使用可点击的按钮，你可以使用React Router并为每个Menu添加一个onClick={() => router.push(Menu.title)} （取决于你实际的 url 是什么）。

否则，以更原生的方式，您可以a标签而不是span标签，它可以接收href={Menu.title} 。 这里的缺点是您必须再次设置它们a样式，因为标签具有特定于浏览器的默认 styles。