使用react中的json创建多页react路由器

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组件是将始终呈现的根组件，因此这将是最适合放置页眉和页脚的位置。