时间戳

首页 > 解决方案 > React Router 每页布局不同

reactjs - React Router 每页布局不同

问题描述

我将页眉和页脚组件的布局命名为MainLayout. 此布局在Home页面中使用。

我想制作另一个名为SubLayout. 这没有标题组件，并在About页面中使用。

如何制作2种不同的布局？

这是我到目前为止尝试过的。

路由器.js

import React from 'react'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import MainLayout from '../components/layouts/MainLayout'
import Home from '../views/home/Home'
import About from '../views/about/About'

export default function Router1() {
  return (
    <Router>
      <Switch>
        <Route>
          <MainLayout>
            <Switch>
              <Route path='/' exact component={Home} />
              <Route path='/about' component={About} />
            </Switch>
          </MainLayout>
        </Route>

      </Switch>
    </Router>
  )
}

主布局

import React from 'react'
import Header from '../../components/layouts/Header'
import Footer from '../../components/layouts/Footer'

export default function Layout({ children }) { 
    return (
        <div className="wrapper">
            <Header />
            <div className="container">
                <div className="content"> 
                    {children}
                </div>
            </div>
            <Footer />
        </div>
    )
}

子布局.js

import React from 'react'
import Footer from '../../components/layouts/Footer'

export default function Layout({ children }) { 
    return (
        <div className="wrapper">
            <div className="container">
                <div className="content"> 
                    {children}
                </div>
            </div>
            <Footer />
        </div>
    )
}

标签： reactjs

解决方案

这不是一个微不足道的问题，并且发生在很多网站上，尤其是在您拥有相当多的页面之后。

解决方案 1

编写布局MainLayout很困难，因为从现在开始您基本上必须修复该网站的所有可能情况，这是一个挑战。

为了避免这种情况，您可以为每个页面设置一个单独的布局组件。前任。

  export default function Page1() {
    return (
      <Header />
      <YourPage1Content />
    )
  }

虽然这对每个页面都有一些额外的工作，但它非常灵活。无论您要支持多少页面（或功能或站点），该解决方案都具有高度可扩展性。例如，如果您想要特定页面，您甚至可以使用完全不同的标题进行连接。

解决方案 2

如果您正在寻找解决此问题的通用方法并且仍然想要一个，MainLayout因为这是每个页面的包装器，它可以通过Context.

  export default function MainLayout() {
    const { hideHeader } = useContext(LayoutContext)
    
    return (
      <>
        {!hideHeader && <Header />}
        {children}
      </>
    )

将context通过路线或任何Context.Provider可以在您App.js或index.js

例如对于特定路线，

  export default function MainLayout() {
    const location = useLocation()
    const hideHeader = location.pathname === '/'
    
    return (
      <>
        {!hideHeader && <Header />}
        {children}
      </>
    )

这种方法非常通用且具有高度可扩展性，只要context对整个站点使用相同的方法即可。

概括

如果您不知道您正在构建哪个站点，请使用解决方案 1，它可以满足任何要求。但是，如果您有特定的需求，解决方案 2 非常适合确保您可以使用通用Layout组件。

Layout总而言之，这与您想要重用多少组件有关。

推荐阅读