Question

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

据我了解，应用程序的入口点应包括这三个组件，并且应根据用户所在的路径呈现其他组件。

我已经建立了我的切入点：

App.js

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

index.js

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

我构建这个问题的方式的问题是我无法在<TopNav>＆amp;之间渲染任何内容。 <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>
)

所有路径组件都将自己呈现在props.children中。

希望有所帮助。

页眉/页脚之间的内容

1 个答案: