如何使用React Js创建动态路由和多个视图？

Question

我有产品登陆和详细信息页面的json数据。在登录页面中，我列出了多个产品项目。如果我点击每个项目，它将转到详细信息页面。如何使用react js实现此功能？

这是我的示例代码

// productlist.js
var React  = require('react');
var list = [
    {
        ID:1,
        IMAGELINK:"",
        TITLE:"Product one"
    },
    {
        ID:2,
        IMAGELINK:"",
        TITLE:"Product two"
    }
];

var Productlist = React.createClass({
    render: function(){
        var frontItmes = this.props.data.map(function(el, i){
        return <div key={i}>
                    <img src={el.IMAGELINK} alt="" width="143" />
                    <h2>{el.TITLE}</h2>
                </div>; 
        });
        return <div className="productlist">{ frontItmes }</div>;
    }
});

var Productlist = React.createClass({
    render: function(){
        var listitems = this.props.data.map(function(el, i){
        return <div key={i}>
                    <img src={el.IMAGELINK} alt="" width="143" />
                    <h2>{el.TITLE}</h2>
                </div>; 
        });
        return <div className="productlist">{ listitems }</div>;
    }
});

var Result = React.createClass({
    render:function(){
        return (
            <div><Productlist data={list} /></div>
        )
    }
});
module.exports = Result;

// productdetail.js
var React  = require('react');
var detail = [
    {
        ID:1,
        IMAGELINK:"",
        TITLE:"Product one",
        DESCRIPTION:"Lorem ipsum doller sit amet."
    },
    {
        ID:2,
        IMAGELINK:"",
        TITLE:"Product two",
        DESCRIPTION:"Lorem ipsum doller sit amet."
    }
];
var ProductDetail = React.createClass({
    render:function(){
        var detailitem = this.props.data.map(function(){
            return <div key={i}>
                    <img src={el.IMAGELINK} alt="" width="143" />
                    <h2>{el.TITLE}</h2>
                    <p>{el.DESCRIPTION}</p>
                </div>;
        });
    }
});

var ResultDetail = React.createClass({
    render:function(){
        return (
            <div><ProductDetail /></div>
        )
    }
});

module.exports = ResultDetail;