Question

我有以下路线.jsx

import React from 'react';
import { Route, Router, IndexRoute } from 'react-router';
import ReactDOM from 'react-dom';

import App from './index.jsx';
import Test1 from './test1.jsx';
import Test2 from './test2.jsx';
import TestWrapper from './wrapper.jsx';

import url from './url.json';

var routes = url.url.map(function(el){
   return (<Route key={el} path={el} component={Test1} />);
});

ReactDOM.render((
  <Router>
    <Route path="/" component={App} >
        {routes}
    </Route>
  </Router>
), document.getElementById('app'));

我将得到一个项目列表，这些项目将始终使用相同的组件：

var routes = url.url.map(function(el){
   return (<Route key={el} path={el} component={Test1} />);
});

和test1.jsx如下：

import React from 'react';
import data from './data.json';

class Test1 extends React.Component {
  render () {
    return (
      <div>
        // if is route "title1" load title1
        // if is route "title2" load title2
        // if is route "title3" load title3
      </div>
    );
  }
}

export default Test1;

我的url.json是：

{
  "url": [
    "title1",
    "title2",
    "title3",
    "title4",
    "title5"
  ]
}

我相当新的反应，我怎样才能传递给＆＃34; test1＆＃34;内容基于网址？理想情况下，我将为内容提供一个单独的json文件。防爆。如果我在localhost：8080 / title1我想只为title1加载内容。

根据路由反应加载json数据

0 个答案: