javascript - 页眉/页脚之间的内容

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 中做这样的事情并以某种方式将适当的组件注入(inject) <PageContent>基于路线？

App.js

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

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

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

Answer 1

这样做的一种方法是:-

路由.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;

主要.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>
)

所有路由组件都会在 props.children 中呈现。

希望对您有所帮助。