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+）。