react中如何注册二级路由

注册二级路由的方法

在React中，通常使用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 './pages/Home';
import Parent from './pages/Parent';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/parent/*" element={<Parent />} />
      </Routes>
    </Router>
  );
}

定义二级路由组件

在父组件（Parent.js）中配置子路由：

import { Routes, Route } from 'react-router-dom';
import ChildA from './ChildA';
import ChildB from './ChildB';

function Parent() {
  return (
    <div>
      <h2>Parent Component</h2>
      <Routes>
        <Route path="child-a" element={<ChildA />} />
        <Route path="child-b" element={<ChildB />} />
      </Routes>
    </div>
  );
}

路由跳转实现

在组件中使用Link进行导航：

import { Link } from 'react-router-dom';

function Parent() {
  return (
    <div>
      <nav>
        <Link to="child-a">Child A</Link>
        <Link to="child-b">Child B</Link>
      </nav>
      {/* 子路由显示区域 */}
      <Routes>
        {/* 子路由配置 */}
      </Routes>
    </div>
  );
}

动态路由匹配

二级路由支持动态参数：

<Route path=":id" element={<ChildDetail />} />

默认二级路由

设置默认渲染的子组件：

<Route index element={<DefaultChild />} />

注意事项

• 父级路由路径需以/*结尾，表明允许嵌套路由
• 子路由路径是相对于父路由的相对路径
• 使用<Outlet />可以指定子路由的渲染位置（React Router v6）
• 确保所有路由组件包裹在同一个<Router>组件内