时间戳

首页 > 解决方案 > 如何根据 React.js 中的不同组件显示不同的页眉和页脚？

javascript - 如何根据 React.js 中的不同组件显示不同的页眉和页脚？

问题描述

我是 React.js 的新手，我在路由组件时遇到问题。我有 2 个不同的博客，两个博客都有不同的页眉和页脚。为某些页面（如文章和主屏幕）呈现不同的页眉和页脚的最佳方法是什么。我尝试制作单独的布局并在这些布局中使用路由，然后在我的 App.js 中使用它，但它不起作用

我做了以下事情，但对我没有任何帮助：

我的 Simple_Blog.js 文件是：

class Simple_Blog extends Component {
  render() {
    return (
  
    <>
     
      <SimpleHeader />

      <Routes> 
          <Route exact path="/" element={<LaunchScreen/>}/>
          <Route exact path="/article1" element={<Article1/>}/>
      </Routes>

      <SimpleFooter />  
    
    </>
  );
  }
}
export default Simple_Blog

我的 Mega_Blog.js 文件是：

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

      <MegaFooter />  
    
    </>
  );
  }
}
export default Mega_Blog

我的 App.js 文件中，我根据不同的路径使用了这两种布局：

class App extends Component {
  render() {
  
   return ( 
    <>
      <Router >

        <Routes>

          <Route exact path="/" element={ <Simple_Blog />} />       
          <Route exact path="/mega" element={ <Mega_Blog/> } >      
       
       </Routes>
  
     </Router>
        
    </>
  );
  }
}
export default App

任何人都可以找出其中的任何错误或告诉我其他方法。

标签： javascriptreactjs

解决方案

在您的 App.js 中执行此操作：

  <Router>
    <Routes>
      <Route path="/mega" element={<Mega_Blog/>}>
        <Route path="/series" element={<Home/>}/>
        <Route path="/article-whats-new" element={<Article_New/>}/>
        <Route path="/" element={<Index/>}>
      </Route>
      <Route path="/simple" element={<Simple_Blog/>}>
        <Route path="/article1" element={<Article1/>}/>
        <Route path="/" element={<LaunchScreen/>}/>
      </Route>
   </Routes>
 </Router>

然后修改您的 Mega_Blog 和 Simple_Blog 组件，使它们只包含页眉、页脚和<Outlet/>标签（用于页面内容，例如 Article1 或 LaunchScreen）。例如：

<>
  <MegaHeader />
  <Outlet />
  <MegaFooter />
</>

推荐阅读