如何在React的Dashboard组件.main-content中渲染<AddProduct />

方案1：利用 props.children 传递组件（无需路由） #

这是最直接的实现方式，把Dashboard改造为支持子组件插槽的容器：

修改 Dashboard 组件 #

不管是函数组件还是类组件，只需在.main-content内部渲染传入的children即可：

// Dashboard.jsx（函数组件示例）
import React from 'react';

const Dashboard = (props) => {
  return (
    <div className="dashboard-container">
      <aside className="sidebar">
        {/* 侧边栏原有内容 */}
      </aside>
      <div className="main-content">
        {/* 这里渲染传入的AddProduct组件 */}
        {props.children}
      </div>
    </div>
  );
};

export default Dashboard;

在 App.js 中调用 #

直接把<AddProduct />作为Dashboard的子元素传入：

// App.js
import React from 'react';
import Dashboard from './Dashboard';
import AddProduct from './AddProduct';

function App() {
  return (
    <div className="App">
      <Dashboard>
        <AddProduct />
      </Dashboard>
    </div>
  );
}

export default App;

方案2：修复 React Router Outlet 的使用（路由场景） #

如果之前用Outlet失败，大概率是路由嵌套结构配置错误，正确的嵌套方式如下：

路由配置（App.js 或单独路由文件） #

// App.js 配合 React Router v6+
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Dashboard from './Dashboard';
import AddProduct from './AddProduct';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* 父路由：Dashboard作为容器 */}
        <Route path="/dashboard" element={<Dashboard />}>
          {/* 子路由：AddProduct会渲染到Dashboard的Outlet位置 */}
          <Route index element={<AddProduct />} />
          {/* 可扩展其他子路由，比如商品列表 */}
          {/* <Route path="list" element={<ProductList />} /> */}
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

修改 Dashboard 组件（添加 Outlet） #

// Dashboard.jsx
import React from 'react';
import { Outlet } from 'react-router-dom';

const Dashboard = () => {
  return (
    <div className="dashboard-container">
      <aside className="sidebar">
        {/* 侧边栏导航，比如跳转至添加商品页面 */}
        <a href="/dashboard">添加商品</a>
      </aside>
      <div className="main-content">
        {/* Outlet会自动渲染匹配的子路由组件 */}
        <Outlet />
      </div>
    </div>
  );
};

注：index路由表示访问/dashboard时默认渲染AddProduct；若需通过/dashboard/add-product访问，将index改为path="add-product"即可。

方案3：利用 Portal 动态挂载（适合特殊场景） #

如果需要动态控制组件挂载位置，可使用React Portal直接将AddProduct渲染到.main-content中：

// Dashboard.jsx
import React, { useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';
import AddProduct from './AddProduct';

const Dashboard = () => {
  const mainContentRef = useRef(null);

  useEffect(() => {
    if (mainContentRef.current) {
      ReactDOM.createPortal(<AddProduct />, mainContentRef.current);
    }
  }, []);

  return (
    <div className="dashboard-container">
      <aside className="sidebar"></aside>
      <div className="main-content" ref={mainContentRef}></div>
    </div>
  );
};

此方案适合需要跨层级挂载的特殊场景，日常开发更推荐前两种方案。

内容的提问来源于stack exchange，提问作者unni krishnan