15版react脚手架使用

//App

import React, { Component } from 'react';

import './App.css';
import {Link} from "react-router"



class App extends Component {
  render() {
    return (
      <div className="App">
         <h1>000</h1>
          <hr/>
          <Link to="/home">首页</Link>
          <Link to="/about">关于</Link>
          <Link to="/other">其他</Link>

         {this.props.children}
      </div>

    );
  }
}

export default App;

//index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import Home from "./components/home"
import Other from "./components/other"
import About from "./components/about"
import Xq from "./components/xq"


import {Router,Route,hashHistory,IndexRoute,IndexRedirect,Redirect,Link} from "react-router"








ReactDOM.render(
    <Router history={hashHistory}>
       <Route path="/" component={App}>
           <Router path="/home" component={Home}>
                <Router path="/xq/:id" component={Xq}></Router>
           </Router>
           <Router path="/about" component={About}></Router>
           <Router path="/other" component={Other}></Router>
           

           <IndexRedirect to="/home"/>
       </Route>
       
    
    
    </Router>
    
    
    
    , document.getElementById('root'));
registerServiceWorker();

//关于

import React, { Component } from 'react';


class About extends Component {
    render() {
      return (
        <div className="About">
           <h1>关于我们</h1>
        </div>
  
      );
    }
  }
  
  export default About;
  

//其他
import React, { Component } from 'react';


class Other extends Component {
    render() {
      return (
        <div className="Other">
           <h1>其他</h1>
        </div>
  
      );
    }
  }
  
  export default Other;

//详情

import React, { Component } from 'react';
import $ from "jquery"

 
class Xq extends Component {
    constructor(props){
       super(props)
       this.state={str:""}
    }


    render() {
      return (
        <div className="Xq">
           
           
           <h1>商品详情</h1>
           <p>{this.state.str}</p>
        </div>
  
      );
    }


    // componentDidMount(){
    //   var that = this
    //   $.ajax({
    //     type:"get",
    //     url:"http://datainfo.duapp.com/shopdata/getGoods.php",
    //     data:{goodsID:that.props.params.id},
    //     async:"true",
    //     dataType:"jsonp",
    //     success:function(data){
    //       console.log(data)
    //       that.setState({str:data[0].detail})
    //     }
    //   })
    // }


    componentWillReceiveProps(a){
      var that = this
      $.ajax({
        type:"get",
        url:"http://datainfo.duapp.com/shopdata/getGoods.php",
        data:{goodsID:that.props.params.id},
        async:"true",
        dataType:"jsonp",
        success:function(data){
         
          that.setState({str:data[0].detail})
        }
      })
    }

  
    
  }
  
  export default Xq;