React侧边栏导航添加页面跳转链接问题求助

要实现侧边栏按钮跳转应用内页面，按以下步骤修改即可：

1. 给菜单数组添加路径属性 #

给Menus里的每个主菜单和子菜单加上path字段，对应跳转的路由地址：

const Menus = [
    { title: "Home", path: "/home", icon: <AiFillHome />},
    { title: "Trending", path: "/trending", icon: <AiFillFire />},
    { title: "Servers", path: "/servers", icon: <AiOutlineCloudServer />},
    { 
        title: "Mods",
        icon: <AiFillSave />,
        submenu: true,
        submenuItems: [
            { title: "GTA Mods", path: "/mods/gta" },
            { title: "RedDead Mods", path: "/mods/reddead" },
            { title: "Skyrim Mods", path: "/mods/skyrim" },
        ],       
    },
    { title: "Uploads", path: "/uploads", icon: <AiFillFolder />},
    { title: "Settings", path: "/settings", icon: <AiFillSetting />},
    { title: "Logout", path: "/logout", icon: <AiOutlineLogout />}
];

2. 用Link组件包裹菜单选项 #

使用react-router-dom提供的Link组件包裹每个菜单项，点击就能触发路由跳转，主菜单和子菜单都要处理：

// 主菜单渲染部分修改
{Menus.map((menu , index) => (
    <>
        <Link to={menu.path} className="w-full">
            <li 
                key={index} 
                className={`text-gray-300 text-sm flex items-center gap-x-4 cursor-pointer p-2 hover:bg-black rounded-md ${menu.spacing ? "mt-9" : "mt-2"}`} 
            >
                <span className='text-2xl block float-left'> 
                    {menu.icon} 
                </span>
                <span className={`text-base font-medium flex-1 ${!open && "hidden"}`}>
                    {menu.title}
                </span>
                {menu.submenu && open && (
                    <BsChevronDown className={`${submenuOpen && "rotate-180"}`} onClick={()=> setSubmenuOpen(!submenuOpen)} />
                )}
            </li>
        </Link>
        {menu.submenu && submenuOpen && open && (
            <ul>
                {menu.submenuItems.map((submenuItem, index) => (
                    <Link to={submenuItem.path} className="w-full" key={index}>
                        <li className="text-gray-300 text-sm flex items-center gap-x-4 cursor-pointer p-2 px-5 hover:bg-black rounded-md">
                            {submenuItem.title}
                        </li>
                    </Link>
                ))}
            </ul>
        )}
    </>
))}

3. 在App.js中配置所有对应路由 #

先创建好每个页面组件（比如Trending.js、Servers.js等），然后在App.js中添加对应的路由规则：

import { BrowserRouter as Router, Routes, Route  } from "react-router-dom";
import Sidebarnav from "./components/Sidebarnav";
import Home from "./pages/Home";
import Trending from "./pages/Trending";
import Servers from "./pages/Servers";
import GTAMods from "./pages/GTAMods";
import RedDeadMods from "./pages/RedDeadMods";
import SkyrimMods from "./pages/SkyrimMods";
import Uploads from "./pages/Uploads";
import Settings from "./pages/Settings";
import Logout from "./pages/Logout";

function App() {
  return (
    <Router>
      <Sidebarnav />
      <Routes>
        <Route path='/' element={<Home/>} /> {/* 默认根路径跳转到Home */}
        <Route path='/home' element={<Home/>} />
        <Route path='/trending' element={<Trending/>} />
        <Route path='/servers' element={<Servers/>} />
        <Route path='/mods/gta' element={<GTAMods/>} />
        <Route path='/mods/reddead' element={<RedDeadMods/>} />
        <Route path='/mods/skyrim' element={<SkyrimMods/>} />
        <Route path='/uploads' element={<Uploads/>} />
        <Route path='/settings' element={<Settings/>} />
        <Route path='/logout' element={<Logout/>} />
      </Routes>
    </Router>
  );
}

export default App;

修复原代码中的小错误 #

原Sidebarnav代码有两处语法错误，必须修正：

• 未闭合的<h1>标签：将<h1 className={text-white text-center origin-left font-medium text-2xl duration-300 UserName}修正为<h1 className={text-white text-center origin-left font-medium text-2xl duration-300}>UserName`
• 错误的引号：将<ul className='"pt-2'>修正为<ul className='pt-2'>

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