//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;