內容之間的頁眉/頁腳

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> 
) 

所有路由組件將自己進入側道具。兒童。

希望有所幫助。