React.js中如何根据不同组件渲染对应header和footer？

• React Router v6 中如果父路由对应的组件内部还有独立的<Routes>配置，父路由的path必须添加*通配符用于前缀匹配。你当前App.js中两个父路由都只写了精确匹配路径，只有访问/和/mega根路径时能渲染对应布局，访问/article1、/mega/series等子路径时无法匹配到父路由，自然不会渲染布局和内部子路由内容。
• exact属性在React Router v6中已经废弃，路由默认是精确匹配规则，不需要额外添加。
• Mega_Blog内部的路由写了绝对路径/mega前缀，虽然不是错误，但可以直接用相对路径简化写法。

1. 修改App.js代码 #

class App extends Component {
  render() {
    return ( 
      <>
        <Router>
          <Routes>
            {/* 加*通配符匹配所有/开头的子路径 */}
            <Route path="/*" element={<Simple_Blog />} />       
            {/* 加*通配符匹配所有/mega开头的子路径 */}
            <Route path="/mega/*" element={<Mega_Blog/>} />      
          </Routes>
        </Router>
      </>
    );
  }
}
export default App 

2. 可选：简化布局组件内的路由路径 #

以Mega_Blog.js为例，因为父路由已经是/mega前缀，内部路由可以直接写相对路径，删去冗余的exact属性：

class Mega_Blog extends Component {
  render() {
    return (
      <>
        <MegaHeader />
        <Routes>
          <Route path="" element={<Index/>}/>
          <Route path="series" element={<Home/>}/>
          <Route path="article-whats-new" element={<Article_New/>}/>
        </Routes> 
        <MegaFooter />  
      </>
    );
  }
}
export default Mega_Blog 

Simple_Blog.js同理删去exact属性即可。

不需要每个布局组件内部写Routes，统一在App.js配置路由结构，用Outlet组件承载子路由内容，结构更清晰易维护，是React Router v6官方推荐的多布局实现方案：

1. 改造布局组件，添加Outlet占位 #

以Simple_Blog.js为例：

import { Outlet } from 'react-router-dom';
class Simple_Blog extends Component {
  render() {
    return (
      <>
        <SimpleHeader />
        {/* 子路由内容会渲染到这里 */}
        <Outlet />
        <SimpleFooter />  
      </>
    );
  }
}
export default Simple_Blog 

Mega_Blog.js同理替换内部的Routes为<Outlet />。

2. App.js统一配置所有路由 #

class App extends Component {
  render() {
    return ( 
      <>
        <Router>
          <Routes>
            {/* Simple博客嵌套路由 */}
            <Route path="/" element={<Simple_Blog />}>
              <Route index element={<LaunchScreen/>}/>
              <Route path="article1" element={<Article1/>}/>
            </Route>
            {/* Mega博客嵌套路由 */}
            <Route path="/mega" element={<Mega_Blog/>}>
              <Route index element={<Index/>}/>
              <Route path="series" element={<Home/>}/>
              <Route path="article-whats-new" element={<Article_New/>}/>
            </Route>    
          </Routes>
        </Router>
      </>
    );
  }
}
export default App 

这种写法所有路由规则统一管理，不需要每个布局单独维护路由，后续新增页面直接在对应父路由下加子路由即可。

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