react-router-dom v6动态路由跳转后未渲染对应子组件问题求助

问题根因 #

你使用了React Router v6的嵌套路由规则，但父路由对应的Portfolio组件没有添加<Outlet>占位符。嵌套路由场景下，子路由的组件内容必须渲染在父组件的<Outlet>节点位置，未添加时自然无法看到SingleProject的内容。

修复方案 #

方案1：保留嵌套路由（适用于需要同时展示Portfolio列表+单个项目详情的场景） #

1. 先在Portfolio组件顶部导入Outlet

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

2. 在Portfolio组件需要展示子路由内容的位置插入<Outlet />节点：

function Portfolio() {
  return (
    <div>
      {/* 原有Portfolio组件的内容：项目列表、筛选栏、跳转Link等 */}
      <div className="project-list">
        {/* 列表内容 */}
      </div>
      {/* 新增：子路由渲染出口，SingleProject会渲染在这里 */}
      <Outlet />
    </div>
  )
}

方案2：改为平级路由（适用于跳转后仅展示SingleProject、不显示Portfolio内容的场景） #

直接修改app.js中的路由配置，取消嵌套关系即可：

<Route path="/portfolio" element={<Portfolio />} />
<Route path="/portfolio/:id" element={<SingleProject />} />

内容的提问来源于stack exchange，提问作者Md Nasir Ahmed