当前位置：首页 > React

react子页面路由如何绑定到div上

2026-01-26 08:38:58React

React 子页面路由绑定到 div 的方法

在 React 中，可以通过 react-router-dom 库将子页面路由绑定到指定的 div 元素上。以下是具体实现方法：

使用 `Routes` 和 `Route` 组件

安装 react-router-dom 库：

react子页面路由如何绑定到div上

npm install react-router-dom

在需要绑定路由的父组件中，使用 Routes 和 Route 组件，并将它们包裹在目标 div 中：

import { Routes, Route } from 'react-router-dom';
import ChildPage1 from './ChildPage1';
import ChildPage2 from './ChildPage2';

function ParentComponent() {
  return (
    <div>
      <h1>父组件</h1>
      <div id="route-container">
        <Routes>
          <Route path="child1" element={<ChildPage1 />} />
          <Route path="child2" element={<ChildPage2 />} />
        </Routes>
      </div>
    </div>
  );
}

嵌套路由配置

如果子页面路由是嵌套的，可以在父组件的路由配置中定义嵌套结构：

react子页面路由如何绑定到div上

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

function ParentComponent() {
  return (
    <div>
      <h1>父组件</h1>
      <div id="route-container">
        <Outlet />
      </div>
    </div>
  );
}

在路由配置文件中定义嵌套路由：

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

const router = createBrowserRouter([
  {
    path: '/',
    element: <ParentComponent />,
    children: [
      { path: 'child1', element: <ChildPage1 /> },
      { path: 'child2', element: <ChildPage2 /> },
    ],
  },
]);

动态路由绑定

如果需要动态绑定路由，可以通过 useRoutes 钩子实现：

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

function ParentComponent() {
  const routes = useRoutes([
    { path: 'child1', element: <ChildPage1 /> },
    { path: 'child2', element: <ChildPage2 /> },
  ]);

  return (
    <div>
      <h1>父组件</h1>
      <div id="route-container">{routes}</div>
    </div>
  );
}