内容之间的页眉/页脚

Question

我正在建立一个网站，其中每个页面有<TopNav>,<Footer>和<Subfooter>。

据我所知，应用程序的入口点应该包含这三个组件，并且应根据用户所在的路线呈现其他组件。

我已经建立了我的切入点，就像这样：

App.js

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

index.js

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

的问题，我以前做的方式这是我无法呈现<TopNav>之间的任何东西& <Footer>。我应该在App.js中做这样的事情，并根据路线以某种方式将适当的组件注入<PageContent>？

App.js

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

此外，在所有的应用程序的每个组件需要一个路由器，因为它们都含有<nav> - 我应该在哪里被定义为<Router>所有这三个组件？

什么是在App.js列出的三个之间添加任何必要组件的正确方法 - 路由代码应该在何处规定所有这三个组件的行为？

Answer 1

这样做可能是一个办法： -

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; 

Main.js

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

最后内部App.js

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

所有路由组件将自己进入侧道具。儿童。

希望有所帮助。