基于json数据反应动态路由

Question

我想基于json数据文件生成许多路由，如下所示：

routes.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'));

url.json：

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

和我的test1.jsx：

import React from 'react';

class Test1 extends React.Component {
  render () {
    return (
      <div>
        <h2>Test 1</h2>
        <p>hjgjgjh</p>
        <p>{this.props.key}</p>
      </div>
    );
  }
}

export default Test1;

如果我点击我的本地路径/标题1或title2或标题3，我应该从组件“test1”获得以下内容：

      <div>
        <h2>Test 1</h2>
        <p>hjgjgjh</p>
        <p>{this.props.key}</p>
      </div>

但我没有，我也应该在屏幕上打印{this.props.key}。 我只得到{App}组件中的任何内容。

我不确定这是否正常：

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

当我点击我的本地路径/ Title1时，我在控制台中没有出现任何错误，但组件Test1也没有显示。

Answer 1

看看你在App组件中是否做了类似这样的事情：

render() {
    return (
        <div>
            App component
            {this.props.children}
        </div>
    );
}

this.props.children是您的子组件（在您的情况下为Test1 ）所在的位置。

编辑：如果你想传递额外的道具，你也可以使用React.cloneElement() 。