极客观点
项目管理
HarmonyOS
react项目中使用了react-router-dom遇到了一些问题，路由添加失败。看如下代码
layout.tsx:
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<ReduxProvider>
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased bg-blue-100 `}
>
<SidebarProvider>
<AppSidebar /> // 这个是侧边栏
<div className="w-full">
{children}
</div>
</SidebarProvider>
</body>
</html>
</ReduxProvider>
);
}page.tsx:
function Screen(){
return (
<Routes>
<Route path="/" element={<ChatDialog />}/>
<Route path="/other" element={<Other />}/>
</Routes>
)
}
export default function Home() {
return (
<Router>
<div className="flex h-full">
<Screen />
<ToastContainer />
</div>
</Router>
);
}
我想要在侧边导航栏（<AppSidebar />）中添加路由，但一直失败。这是我侧边导航栏的部分代码：
<SidebarMenu>
{items.map((item) => (
// 标记当前选中的功能（当前功能的背景颜色会标深色）
<SidebarMenuItem key={item.title} className={` ${item.title === currentModel
? 'bg-gray-200 font-bold text-black' // 选中态样式
: 'text-gray-700 hover:bg-gray-100' // 默认态样式
}`} onClick={() => handleModelChange(item.title)}>
<SidebarMenuButton asChild>
<div className="cursor-pointer">
<link href="/"></link>
<item.icon />
<span>{item.title}</span>
</div>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>在page.tsx中添加路由的话，我在<AppSidebar />中就不能使用useNavigate()了。请大佬们给我一个解决办法。我希望点击文本生成图像与图像质量检测的页面是不一样的，点击文本生成图像出现的是ai聊天，图像质量检测是另一个页面。我对前端的知识了解比较少。