react如何实现路由嵌套
React 实现路由嵌套的方法
在 React 中，可以通过 react-router-dom 库实现路由嵌套。以下是具体实现方式：
安装 react-router-dom
确保项目中已安装 react-router-dom，若未安装可通过以下命令安装：
npm install react-router-dom基础路由配置
在主文件（如 App.js）中配置基础路由结构：
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home';
import Dashboard from './Dashboard';
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/dashboard/*" element={<Dashboard />} />
</Routes>
</Router>
);
}嵌套路由实现
在子组件（如 Dashboard.js）中定义嵌套路由：
import { Routes, Route } from 'react-router-dom';
import Profile from './Profile';
import Settings from './Settings';
function Dashboard() {
return (
<div>
<h1>Dashboard</h1>
<Routes>
<Route path="profile" element={<Profile />} />
<Route path="settings" element={<Settings />} />
</Routes>
</div>
);
}路径匹配说明
- 父路由路径需以
/*结尾（如/dashboard/*），表示允许嵌套路由匹配。 - 子路由路径为相对路径（如
profile），最终会拼接为/dashboard/profile。
使用 Link 导航
在组件中使用 <Link> 跳转嵌套路由：
import { Link } from 'react-router-dom';
function DashboardNav() {
return (
<nav>
<Link to="profile">Profile</Link>
<Link to="settings">Settings</Link>
</nav>
);
}默认嵌套路由
可通过 index 属性设置默认渲染的子路由：
<Routes>
<Route index element={<DefaultDashboard />} />
<Route path="profile" element={<Profile />} />
</Routes>注意事项
- 确保所有路由组件包裹在
<Router>内。 - 嵌套路由的父组件需包含
<Routes>和<Route>定义。 - 使用
useRoutes钩子可实现更复杂的路由配置（需 v6+）。
