在 React 中创建页面模板的最佳方法是啥？

Posted 2023-02-16

【中文标题】在 React 中创建页面模板的最佳方法是啥？

【英文标题】：What's the best way to create a page template in React?在 React 中创建页面模板的最佳方法是什么？

【发布时间】：2018-03-21 15:53:20

【问题描述】：

基本上我想在每个页面中包含页眉、侧边栏和页脚。 我目前在每个单独的页面上都有上述内容，反应路由器点击每个页面。 我想缩小我的代码大小，并拥有一个主模板，该模板允许每个页面的每个主要部分在页眉、页脚和侧边栏导航的情况下都是唯一的。 添加这个的最佳位置是什么？在 App.js 和 index 中尝试过，但似乎不喜欢。

我使用 antd 作为我的主要框架。

提前致谢！

 ReactDOM.render((
   <div>
     <Layout>
       <Sider>
         <SideMenu />
       </Sider>
       <Layout>
         <Header />
         <Content style= margin: '0 16px' >
           <div className='appWrap'>
             <BrowserRouter>
               <LocaleProvider locale=enUS>
                 <App />
               </LocaleProvider>
             </BrowserRouter>
             <Footer />
           </div>
         </Content>
       </Layout>
     </Layout>
   </div>
), document.getElementById('root'));

类似的东西。我希望模板围绕主 App.js 加载，我已经看到使用路由器创建单独的模板不会节省我的代码，因为它是我几乎已经拥有的。

【问题讨论】：

贴一些你尝试过的代码

刚刚更新。 :)

我认为你的布局已经差不多了，你有一些元素和组件没有按正确的顺序关闭。我猜您的 App 组件包含您的路线？您目前遇到的错误是什么？

如果我在 index.js 中有该代码，它会抱怨定义路由。我的路由器目前在 app.js 中，没错。

您不应该在 之外使用 或 withRouter() ▶ 20 个堆栈帧被折叠。 ./src/index.js D:/TFS/Websites/Main/software/src/index.js:9 6 |从 'antd/lib/locale-provider/en_US' 导入 enUS； 7 |从'./Components/Header/Header'导入标题； 8 | > 9 | ReactDOM.render(( 10 | 11 |

【参考方案1】：

我目前正在使用类似的方法，通过创建一个将道具传递给 Route 组件的自定义组件：

routes.jsx：

import React,  Fragment  from 'react';
import 
  BrowserRouter as Router,
  Switch
 from 'react-router-dom';
import LayoutDefault from './views/layouts/LayoutDefault';
import Startpage from './views/Startpage';

const Routes = () => (
  <Router>

    <Switch>
      <LayoutDefault exact path="/dashboard" component=Startpage />
      // ... more routes
    </Switch>

  </Router>
);

export default Routes;

还有LayoutDefault.jsx

import React,  Fragment  from 'react';
import  Route  from 'react-router-dom';
import LoggedinMenu from 'modules/Menu/LoggedinMenu';

const LayoutDefault = (props) => (
  <Fragment>
    <LoggedinMenu />
    <Route ...props />
  </Fragment>
);

export default LayoutDefault;

【参考方案2】：

我会将模板代码包装到它自己的组件中。这是对每个页面使用模板的简单演示。您也可以选择保持路由器不变，直接在每个页面中使用模板组件。希望对您有所帮助。

模板.jsx：

class Template extends React.Component 
  render() 
    return (
      <Layout style= minHeight: '100vh' >
        <Layout.Sider>Sider</Layout.Sider>
        <Layout>
          <Layout.Header>Header</Layout.Header>
          <Layout.Content>
            this.props.children
          </Layout.Content>
          <Layout.Footer>Footer</Layout.Footer>
        </Layout>
      </Layout>
    );
  

index.jsx

ReactDOM.render(
    <Template>
        <BrowserRouter>
            <LocaleProvider locale=enUS>            
                <Route path='/' component=Root />
                <Route path='/about' component=About />
                <Route path='/profile' component=Profile />
            </LocaleProvider>
        </BrowserRouter>
    </Template>,
    document.getElementById('root')
);

【参考方案3】：

类似的东西。确保所有内容都在 BrowserRouter 组件内。

ReactDOM.render(
    <BrowserRouter>
        <LocaleProvider locale=enUS>
            <Header />
            <Route path='/' component=Root />
            <Route path='/about' component=About />
            <Route path='/profile' component=Profile />
            <Footer />
        </LocaleProvider>
    </BrowserRouter>,
    document.getElementById('root')
);

【讨论】：

那么将路由器移到 index.js 中？