React Router带变量名的子路由配置问题求助

你的问题核心是嵌套路由的父组件没有挂载<Outlet />，导致子路由组件无法渲染，所以访问/p/<id>/friends时只会显示Profile组件的内容。以下是具体的修复步骤：

1. 给Profile组件添加Outlet #

在Profile组件中引入并添加react-router-dom提供的<Outlet />，它是子路由内容的挂载容器。修改后的Profile组件示例：

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

const Profile = () => {
  return (
    <div>
      {/* Profile组件自身的内容 */}
      <h1>用户主页</h1>
      {/* 子路由组件会渲染到这里 */}
      <Outlet />
    </div>
  );
};

export default Profile;

2. 修正路由配置的拼写错误 #

你的路由配置里存在标签拼写错误：</BrowserRoute>应该改为</BrowserRouter>，否则会导致React渲染报错。修正后的路由配置：

root.render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<App />} >
          <Route path="/p/:someId" element={<Profile />} >
            <Route path="friends" element={<Friends />} />
            <Route path="pictures" element={<Pictures />} />
            {/* 其他子路由 */}
          </Route>
        </Route>
      </Routes>
    </BrowserRouter>
  </React.StrictMode>
);

3. 确认嵌套路由结构正确性 #

你的路由嵌套逻辑是对的：

• App作为根路由的组件，里面的<Outlet />负责渲染/p/:someId的内容
• Profile作为父路由组件，内部的<Outlet />负责渲染friends、pictures等子路由的内容

完成以上修改后，访问/p/<id>/friends时，页面会同时显示Profile的内容和Friends组件的内容；如果希望子路由完全替换Profile的内容，可以调整布局结构，比如把Profile的基础内容放在子路由之外，或者重新设计路由层级。

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