App.js
/*
react路由的配置:
1、找到官方文档 https://reacttraining.com/react-router/web/example/basic
2、安装 cnpm install react-router-dom --save
3、找到项目的根组件引入react-router-dom
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
4、复制官网文档根组件里面的内容进行修改 (加载的组件要提前引入)
<Router>
<Link to="/">首页</Link>
<Link to="/news">新闻</Link>
<Link to="/product">商品</Link>
<Route exact path="/" component={Home} />
<Route path="/news" component={News} />
<Route path="/product" component={Product} />
</Router>
exact表示严格匹配
react动态路由传值
1、动态路由配置
<Route path="/content/:aid" component={Content} />
2、对应的动态路由加载的组件里面获取传值
this.props.match.params
跳转:<Link to={`/content/${value.aid}`}>{value.title}</Link>
react get传值
1、获取 this.props.location.search
*/
import React, { Component } from 'react';
// import logo from './logo.svg';
// import './App.css';
import './assets/css/index.css'
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Home from './components/Home'
// import News from './components/News'
// import Product from './components/Product'
// import Content from './components/Content'
// import ProductContent from './components/ProductContent'
import Pcontent from './components/Pcontent'
class App extends Component {
render () {
return (
<Router>
<div>
{/* link路由跳转 */}
<Link to="/">首页</Link>
{/* <Link to="/news">新闻</Link> */}
{/* <Link to="/product">商品</Link> */}
<Link to="/pcontent">商品</Link>
{/* <Link to="/productcontent">商品详情</Link> */}
<Route exact path="/" component={Home} />
{/* <Route path="/news" component={News} /> */}
{/* <Route path="/product" component={Product} /> */}
<Route path="/pcontent/:id" component={Pcontent} />
{/* <Route path="/productcontent" component={ProductContent} /> */}
{/* 配置动态路由 */}
{/* <Route path="/content/:aid" component={Content} /> */}
</div>
</Router >
)
}
}
export default App;
Home.js
import React from 'react'
import axios from 'axios'
import { Link } from "react-router-dom"
class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
title: '首页',
list: [],
domain: 'http://a.itying.com/'
};
}
requestData = () => {
var api = this.state.domain + 'api/productlist';
axios.get(api)
.then((response) => {
console.log(response.data.result)
this.setState({
list: response.data.result
})
})
.catch(function (error) {
console.log(error);
});
}
componentDidMount () {
this.requestData()
}
render () {
return (
<div className="home">
<div className="list">
{
this.state.list.map((value, key) => {
return (
<div className="item" key={key}>
<h3 className="item_cate">{value.title}</h3>
<ul className="item_list">
{
value.list.map((v, k) => {
return (
<li key={k}>
<Link to={`/pcontent/${v._id}`}>
<div className="inner">
{/* <img src={require('../assets/images/2.jpg')} /> */}
<img src={`${this.state.domain}${v.img_url}`} alt={v.title}/>
<p className="title">{v.title}</p>
<p className="price">{v.price}元</p>
</div>
</Link>
</li>
)
})
}
</ul>
</div>
)
})
}
</div>
</div>
)
}
}
export default Home
Pconmtent.js react解析Html代码的方式dangerouslySetInnerHTML
import React from 'react'
import { Link } from "react-router-dom";
const axios = require('axios');
class Pcontent extends React.Component {
constructor(props) {
super(props);
this.state = {
title: '产品详情',
list: [],
domain: 'http://a.itying.com/'
};
}
requestData (id) {
var api = this.state.domain + 'api/productcontent?id=' + id;
axios.get(api)
.then((response) => {
console.log(response.data.result);
console.log(response.data.result[0])
this.setState({
list: response.data.result[0]
})
})
.catch(function (error) {
console.log(error);
})
}
componentWillMount () {
console.log(this.props.match.params.id)
let id = this.props.match.params.id;
this.requestData(id);
}
render () {
return (
<div className="pcontent">
<div className="back"> <Link to='/'>返回</Link></div>
<div className="p_content">
<div className="p_info">
<img src={`${this.state.domain}${this.state.list.img_url}`} alt={this.state.list.title}/>
<h2>{this.state.list.title}</h2>
<p className="price">{this.state.list.price}/份</p>
</div>
<div className="p_detial">
<h3>
商品详情
</h3>
{/* 这是react解析Html代码的方式dangerouslySetInnerHTML */}
<div className="p_content" dangerouslySetInnerHTML={{ __html: this.state.list.content }}>
</div>
</div>
</div>
<footer className="pfooter">
<div className="cart">
<strong>数量:</strong>
<div className="cart_num">
<div className="input_left">-</div>
<div className="input_center">
<input type="text" readOnly="readonly" value="1" name="num" id="num" />
</div>
<div className="input_right">+</div>
</div>
</div>
<button className="addcart">加入购物车</button>
</footer>
</div>
);
}
}
export default Pcontent;