在react中使用json创建多个页面react路由器

Question

How to create multiple pages where header and footer will be static and inside content image , text etc will fetched from .json file in using react and react router

i have already something like this

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);

i want that .json file content will replace value inside {}

Answer 1

The link below provides a good example of nested navigation.

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

If you look at the routing configuration in this example, you will see that the rendered components are nested.

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)

The about and inbox routes will ensure that the component is passed to the root component ( / ) as props.children , which can be used like this:

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>
    )
  }
})

In this example you can see the App component as your root component that will always be rendered, so this would be the most fitting place for a header and footer.