在反应中使用json创建多个页面反应路由器答案

【问题标题】：create multiple pages react router using json in react在反应中使用json创建多个页面反应路由器
【发布时间】：2017-04-21 04:26:42
【问题描述】：

如何创建多个页面，其中页眉和页脚将是静态的，内部内容图像、文本等将在使用 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 文件内容将替换 {}

中的值

【问题讨论】：

欢迎来到 Stackoverflow。请阅读这些链接以改善您的问题：Tour | How to ask | Minimal, Complete and Verifiable Example

标签： json reactjs react-router

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

【讨论】：