反应/单页/结构页眉/内容/页脚答案

【问题标题】：React / single page / struct header/content/footer反应/单页/结构页眉/内容/页脚
【发布时间】：2019-12-12 10:27:15
【问题描述】：

你好，到目前为止我有这个：

应用js：

const App = () => {
  return (
  <BrowserRouter>
  <PublicRoute restricted={false} component={Header} path={['/']} exact />
  <Switch>
    <PublicRoute restricted={false} component={Content} path="/" exact />
    <PublicRoute restricted={false} component={Content2} path="/" exact />
  </Switch>
  <PublicRoute restricted={false} component={Footer} path={['/']} exact />
  </BrowserRouter>
  )
}
header.js

const Header = () => {
    return(
    <div style={{backgroundColor:'#000'}}>
        Header
    </div>
    )  
}

页脚.js

import React from 'react';

const Footer = () => {
    return(
    <div style={{backgroundColor:'#eee'}}>
        Footer
    </div>
    )
}

我不知道我是否在单个页面的正确轨道上，但我很难找到将页脚病态放置在底部 0 的最佳解决方案

【问题讨论】：

什么是“脚病”？
固定并粘在浏览器窗口底部
我认为这是一个 CSS 问题。试试看：#footer { position: fixed; bottom: 0; width: 100%; }
是的，我也做过cs，但我也问过路线，单页，但我该如何放置我的内容？
转到：https://reacttraining.com/react-router/web/guides/quick-start 并按照示例进行操作。它会让您快速启动并运行您的路线。

标签： css reactjs react-router

【解决方案1】：

您有 2 种方法来创建这样的网站

1) 您使用的：

const App = () => {
  return (
         <>
       <BrowserRouter>

    <YourHeaderComponent/>
            <Switch>
            {yourRoutesArray.map (route => (
               <Route
                key={route.path}
                path={route.path}
                exact={route.exact}
                component={route.component}
                />
              ))}
          <Route component={Your404Component} />
        </Switch>
    </BrowserRouter>

    <YourFooterComponent/>
    </>
    )}

2) 用于布局的：

export const withLayout = (Page: any) => {
 return (
   <>
        <Header />
        <Page {...props} />
        <Footer />
   </>
      );
}

并且在你所有的根目录中都像这样导出它

const YourComponent =()=>{
   return(
       <div>hello</div>
   )
}

export default withLayout(YourComponent);

【讨论】：

谢谢你觉得哪个更好？谢谢！！
两种方式我都用过，但我认为第二种方式更稳定，因为它不依赖于库。

【解决方案2】：

试试这样的。

const App = () => {
    return (
    <BrowserRouter>
    <Header />
    <Switch>
      <Route restricted={false}  path="/" exact><Content /></Route> 
      <Route restricted={false}  path="/contenttwo" exact /><ContentTwo /></Route>
    </Switch>
    <Footer />
    </BrowserRouter>
    )
  }

这将始终呈现您的页眉和页脚组件，并且仅根据路由更改内容。

【讨论】：