創建多個頁面中使用JSON反應路由器反應

如何創建多個網頁，頁眉和頁腳是靜態的，裏面的內容圖像，文本等將在使用反應從以.json文件獲取並做出反應路由器創建多個頁面中使用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文件內容將取代內部的價值{}

來源

2016-12-06 Kobid Kunda

歡迎來到Stackoverflow。請閱讀以下鏈接以改善您的問題：[Tour]（http://stackoverflow.com/tour）| [如何問]（http://stackoverflow.com/help/how-to-ask）| [最小，完整和可驗證示例]（http://stackoverflow.com/help/mcve） – Tom

下面的鏈接提供嵌套導航的一個很好的例子。

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組件作爲您的根組件，將始終呈現，所以這將是最適合頁眉和頁腳的地方。

來源

2016-12-06 13:58:24 Alexander

創建多個頁面中使用JSON反應路由器反應

回答

相關問題