在cursor中新建react项目后，需安装react-router-dom@6并用browserrouter包裹根组件，再通过link或navlink创建导航菜单，配合routes和route配置路径跳转，注意路径大小写敏感及上下文依赖。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
在Cursor中新建React项目后，要快速实现一个可点击跳转的导航菜单，需结合React Router配置路由路径、定义菜单项结构，并用Link组件替代原生a标签避免页面刷新。
安装并初始化React Router
打开终端面板（Ctrl+`），确保项目根目录下执行：
npm install react-router-dom@6
这一步必须完成，否则后续所有Link和Router组件都会报错。v6版本与v5不兼容，不能直接升级旧项目。
编辑src/main.jsx，将原有ReactDOM.render替换为Router包裹：
import { BrowserRouter } from 'react-router-dom'
ReactDOM.createRoot(document.getElementById('root')).render(
)
创建带跳转功能的导航菜单组件
在src/components/Navigation.jsx中新建文件，写入以下内容：
import { Link } from 'react-router-dom'
export default function Navigation() {
return (
)
}
注意：Link必须在Router上下文中才能生效，否则点击无反应且控制台报错“useNavigate must be used within a
配置路由页面并挂载导航
第一步：在src/App.jsx中引入Navigation组件和Route相关API
import { Routes, Route } from 'react-router-dom'
第二步：用Routes包裹所有Route，每个Route对应一个路径和元素
function App() {
return (
)
}
第三步：创建三个空页面组件（Home.jsx、About.jsx、Contact.jsx）放在src/pages/目录下，内容只需返回简单文字即可验证跳转效果。例如Home.jsx中写export default () =>
首页内容
。【路径大小写敏感】：Route的path属性区分大小写，/About不会匹配到/aBout，务必统一使用小写路径命名习惯。
添加选中状态高亮样式
方法一：用NavLink替代Link，自动添加active类名
import { NavLink } from 'react-router-dom'
方法二：用CSS选择器配合NavLink内置的style函数
style={({ isActive }) => ({ color: isActive ? '#007bff' : '#333' })}
>联系
这一步操作起来很简单，直接把Link替换成NavLink就能看到效果，无需额外配置CSS类。
