Javascript 页眉/页脚之间的内容

我正在创建一个站点，其中每个页面都有一个

，

和一个

据我所知，应用程序的入口点应该包括这三个组件，另外一个组件应该根据用户所在的路线进行渲染

我建立了这样的入口点：

App.js

const App = () => (
  <div>
    <TopNav />
    <Footer />
    <Subfooter />
  </div>
)

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

const App = () => (
  <div>
    <TopNav />
    <PageContent />
    <Footer />
    <Subfooter />
  </div>
)

const-App=（）=>(
)

index.js

const App = () => (
  <div>
    <TopNav />
    <Footer />
    <Subfooter />
  </div>
)

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

const App = () => (
  <div>
    <TopNav />
    <PageContent />
    <Footer />
    <Subfooter />
  </div>
)

ReactDOM.render(
,
document.getElementById（'root'））
);

我构建此文档的方式存在的问题是，我无法呈现介于

和

之间的任何内容。我是否应该在App.js中执行类似操作，并根据路径将适当的组件注入

App.js

const App = () => (
  <div>
    <TopNav />
    <Footer />
    <Subfooter />
  </div>
)

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

const App = () => (
  <div>
    <TopNav />
    <PageContent />
    <Footer />
    <Subfooter />
  </div>
)

const-App=（）=>(
)

此外，应用程序中的每个组件都需要一个路由器，因为它们都包含

-我应该在哪里为这三个组件定义

---

在App.js中列出的三个组件之间添加任何必要组件的正确方法是什么？路由代码应该在哪里指示这三个组件的行为

一种方法是：-

Routes.js

import React,{ Component } from 'react';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';

import App from './components/app';
import SomeComponent from './components/some-component';
import AnotherComponent from './components/another-component';

const taskRouter = (
    <Router history={browserHistory}>
        <Route path="/" component={App}>
            <IndexRoute component={SomeComponent} />
            <Route path="/another" component={AnotherComponent} />
        </Route>
    </Router>
);

export default taskRouter;

import React，{Component}来自'React'；
从“react Router”导入{Router，Route，IndexRoute，browserHistory}；
从“./components/App”导入应用程序；
从“./components/some component”导入SomeComponent；
从“./components/另一个组件”导入另一个组件；
常量任务路由器=(
);
导出默认任务路由器；

Main.js

import React from 'react';
import ReactDOM from 'react-dom';
import Router from './Routes';
ReactDOM.render(<Router/>, document.getElementById('root'));

从“React”导入React；
从“react dom”导入react dom；
从“./Routes”导入路由器；
ReactDOM.render（，document.getElementById（'root'））；

最后是App.js内部

const App = (props) => (
  <div>
    <TopNav />
    {props.children}
    <Footer />
    <Subfooter />
  </div>
)

const-App=（道具）=>(
{props.children}
)

所有管线组件都将在props.children内呈现

---

希望能有所帮助。

谢谢-只是想澄清一下，Main.js会取代index.js吗？在这种情况下，我认为会。是的，它会取代index.js，你可以将其重命名为index.js。我个人使用Main。Js文件，这就是为什么它被命名为