React Router指定路径未渲染组件求助：/compose需同时显示Main与Compose

你的问题核心是嵌套路由的父组件未使用<Outlet />，同时路由配置存在重复渲染逻辑，导致子组件无法正常显示。以下是具体修复方案：

1. 在Main组件中添加Outlet占位符 #

React Router的嵌套路由需要父组件通过<Outlet />指定子路由组件的渲染位置。修改你的Main组件：

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

function Main() {
  return (
    <div className="main-content">
      {/* Main组件原有内容 */}
      <p>这是Main组件的固定内容</p>
      {/* 子路由组件会在此处渲染 */}
      <Outlet />
    </div>
  );
}

2. 调整路由配置结构 #

原配置中父路由path="/"已渲染<Main />，同时index路由重复渲染Main，会导致根路径下重复显示组件。修改路由代码如下：

return (
    <>
        <LeftSidebar />
        <div className="content">
            <Routes>
                {/* 父路由：匹配/和/compose，渲染Main组件 */}
                <Route path="/" element={<Main />}>
                    {/* 根路径/：仅显示Main，Outlet位置无额外内容 */}
                    <Route index element={null} />
                    {/* /compose路径：在Main的Outlet位置渲染Compose */}
                    <Route path="compose" element={<Compose />} />
                </Route>
                <Route path="/login" element={<Login />} />
                <Route path="/register" element={<Register />} />
                <Route path="*" element={ <h1>Not found (404)</h1> } />
            </Routes>
        </div>
        <RightSidebar />
    </>
);

逻辑说明 #

• 父路由path="/"会匹配所有以/开头的路径（包括/和/compose），并渲染Main组件作为容器
• <Outlet />是React Router提供的占位符，会自动替换为当前匹配的子路由组件
• 访问/时，index路由的element={null}让Main的Outlet位置无内容，实现仅显示Main的需求
• 访问/compose时，Main组件正常渲染，同时Compose组件插入到Outlet位置，实现两个组件同时显示

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