基於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() 。