Question

基本上我想在每个页面中包含标题，侧边栏和页脚。我现在在每个单独的页面上都有上面提到的反应路由器点击它们每个。我想缩小我的代码大小并有一个主模板，允许每个页面的每个主要部分都是唯一的，页眉，页脚和侧边栏导航就位。添加此内容的最佳位置是什么？试过App.js和索引，但似乎并不喜欢。

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

提前致谢！

compute_instance

有些事情。我希望模板能够加载主App.js我已经看到使用路由器来创建单独的模板，因为它是我已经拥有的代码而不能保存代码。

Answer 1

我目前正在使用类似的方法创建一个将props传递给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;

Answer 2

像这样的东西。确保所有内容都在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')
);

Answer 3

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

Template.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')
);

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

3 个答案: