React嵌套路由组件重复渲染问题求助

我在项目中使用React嵌套路由时遇到组件重复渲染问题——访问嵌套路由里的Tasks组件时，页面上该组件内容会被渲染两次。以下是相关代码、问题截图及仓库地址，需要解决该问题让组件仅渲染一次。

路由配置代码 #

const root = ReactDOM.createRoot(document.getElementById('root'));

export default function App(){
      return(
        <BrowserRouter>
         <Routes>   
            <Route path = '/show/:id' element={<View/>} > 
              <Route path = 'home' element = {<ViewHome/>}> 
                <Route path='overview' element={<Overview/>} />
                <Route path='packages' element={<Packages/>} />
                <Route path='taskItems' element={<Tasks/>} />
                <Route path='features' element={<Features/>} />
                <Route path='github' element={<Git/>} />
              </Route>
              <Route path='progress' element= {<Progress />} />
            </Route>
          </Routes>
        </BrowserRouter>
      )
}

root.render(
    <App/>
);

导航链接组件代码 #

function Lists(props){

    var overviewPath = `overview`
    var packagePath = `packages`
    var taskPath = `taskItems`
    var featurePath = `features`
    var gitPath = `github`
    var aboutPath = `about`

    return(
        
        <div className="viewList">
            <nav>
            <Link to={overviewPath}>Overview</Link><br/>
            <Link to={packagePath}>Packages</Link><br/>
            <Link to={taskPath}>Tasks</Link><br/>
            <Link to={featurePath}>Features</Link><br/>
            <Link to={gitPath}>GitHub</Link><br/>
            <Link to={aboutPath}>about</Link><br/>
            </nav>
        </div>
    )

}

export default Lists;

Tasks组件代码 #

function Tasks(){
    return(
        <div>
            <Typography variant= 'h3' >Tasks</Typography>
        </div>
    )

}

export default Tasks;

问题截图 #

仓库地址 #

https://github.com/bharathkumarsaravanan/Todo-App

问题排查与解决方法 #

核心原因 #

组件重复渲染/显示的最常见原因是父组件中同时通过手动渲染和路由Outlet重复输出了子组件，比如ViewHome组件里既手动写了<Tasks/>，又通过<Outlet/>渲染了路由匹配的Tasks组件，导致页面显示两次。

解决步骤 #

1. 检查ViewHome组件代码：确保它只使用<Outlet/>来渲染嵌套路由匹配的子组件，不要手动添加Tasks或其他子路由组件的渲染代码。正确示例：

import { Outlet } from 'react-router-dom';
import Lists from './Lists';

function ViewHome() {
  return (
    <div className="view-home-container">
      <Lists /> {/* 导航组件 */}
      {/* 仅通过Outlet渲染匹配的嵌套路由组件 */}
      <Outlet />
    </div>
  );
}

export default ViewHome;

2. 验证组件渲染次数：在Tasks组件中添加日志，确认是否真的被渲染两次：

function Tasks(){
    console.log('Tasks组件渲染');
    return(
        <div>
            <Typography variant= 'h3' >Tasks</Typography>
        </div>
    )
}

• 如果控制台打印两次：说明组件被实例化了两次，需排查哪里重复调用了<Tasks/>
• 如果控制台仅打印一次但页面显示两次：检查DOM结构，可能是父组件的布局导致内容重复输出

3. 检查路由配置：确认没有重复定义taskItems路径的路由，避免路由匹配多次。

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