は、私は次のようにJSONデータファイルに基づいてルートの数を生成するJSONデータに

Question

をベースダイナミックルートに反応：

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; 

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

が、私はそうではない、と私はまた、{this.props.key}を持っている必要があります印刷：私のローカルパス/タイトル1またはTITLE2またはタイトル3を襲った私は、コンポーネント「TEST1」から次を取得する必要があります画面上で。 {App}コンポーネント内にあるものだけを取得します。

私はこれが正しく動作するかどうかを確認していない：

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

whenIは、私は、コンソールにエラーが、Test1のはどちらか表示されませんコンポーネントを得ることはありません、私のローカルパス/タイトル1を打ちました。

Answer 1

、あなたのアプリケーションコンポーネントでこのような何かをやっているかどうかを確認してください：（あなたのケースTest1をで）自分の子コンポーネントが配置されている場所

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

this.props.childrenです。

編集：余分な小道具を渡したい場合は、React.cloneElement()を使用することもできます。