Question

如何创建多个页面，其中页眉和页脚将是静态的，内部图像，文本等将使用react和react路由器从.json文件中获取

我已经有类似这样的事了

import React, { PropTypes } from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './Contact.css';

const title = 'Contact Us';

function Contact(props, context) {
  context.setTitle(title);
  return (
    <div className={s.root}>
      <div className={s.container}>
        <h1>{title}</h1>
        <p>...</p>
      </div>
    </div>
  );
}

Contact.contextTypes = { setTitle: PropTypes.func.isRequired };

export default withStyles(s)(Contact);

我希望.json文件内容将替换{}

中的值

Answer 1

以下链接提供了嵌套导航的一个很好的示例。

https://github.com/ReactTraining/react-router/blob/master/docs/guides/RouteConfiguration.md

如果查看此示例中的路由配置，您将看到渲染的组件是嵌套的。

render((
  <Router>
    <Route path="/" component={App}>
      <Route path="about" component={About} />
      <Route path="inbox" component={Inbox}>
        <Route path="messages/:id" component={Message} />
      </Route>
    </Route>
  </Router>
), document.body)

about和inbox路由将确保将组件作为/传递给根组件（props.children），可以像这样使用：

const App = React.createClass({
  render() {
    return (
      <div>
        <h1>App</h1>
        <ul>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/inbox">Inbox</Link></li>
        </ul>
        {this.props.children}
      </div>
    )
  }
})

在此示例中，您可以看到App组件作为将始终呈现的根组件，因此这将是页眉和页脚最合适的位置。

在

1 个答案: