一、页面
二、react-router4.x 路由配置
App.js
import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Home from "./components2/Home.js";
import Pcontent from "./components2/Pcontent.js";
import "./assets2/css/basic.css";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<Router>
<div className="App">
<Route path="/" exact component={Home}></Route>
<Route path="/pcontent/:id" component={Pcontent}></Route>
</div>
</Router>
);
}
}
export default App;
Home.js
import React, { Component } from "react";
import { Link } from "react-router-dom";
import axios from "axios";
import "../assets2/css/index.css";
class Home extends Component {
constructor(props) {
super(props);
this.state = {
list: [],
api:"http://a.itying.com/"
};
}
render() {
return (
<div className="home">
<header class="index_header">
<div class="hlist">
<img src={require("../assets2/images/rexiao.png")} alt="" />
<p>热销榜</p>
</div>
<div class="hlist">
<img src={require("../assets2/images/caidan.png")} alt="" />
<p>点过的菜</p>
</div>
<div class="hlist">
<img src={require("../assets2/images/sousuo.png")} alt="" />
<p>搜你喜欢</p>
</div>
</header>
<aside class="left_cate" id="left_cate">
<ul>
{
this.state.list.map((item, index) =>{
return (
<li key={index} >{item.title}</li>
)
})
}
</ul>
<div id="nav_cate" class="nav_cate">
<img src={require("../assets2/images/nav.png")} alt="" />
<p>菜单</p>
</div>
</aside>
<div className="content">
{this.state.list.map((item, index) => {
return (
<div className="item" key={index}>
<h3 className="item_cate">{item.title}</h3>
<ul className="item_list">
{item.list.map((food, index2) => {
return (
<li key={index2}>
<div className="inner">
<Link to={`/pcontent/${food._id}`}>
<img src={`${this.state.api}${food.img_url}`} alt=""/>
<p className="title">{food.title}</p>
<p className="price">¥{food.price}</p>
</Link>
</div>
</li>
);
})}
</ul>
</div>
);
})}
</div>
<div class="bg" id="bg"></div>
<div id="footer_cart" class="footer_cart">
<Link to="/cart">
<img src={require("../assets2/images/cart.png")} alt="" />
<p>购物车</p>
</Link>
</div>
</div>
);
}
}
export default Home;
三、react-router4.x 请求菜品和菜品分类数据
Home.js
//首页菜品Api
import axios from "axios";
class Home extends Component {
constructor(props) {
super(props);
this.state = {
list: [],
api:"http://a.itying.com/"
};
}
requestData = () => {
var api = this.state.api + "api/productlist";
axios
.get(api)
.then((response) => {
// handle success
// console.log(response);
this.setState({
list: response.data.result,
});
})
.catch((error) => {
// handle error
console.log(error);
});
};
componentDidMount() {
this.requestData();
}
四、react-router4.x 循环渲染二维数组
Home.js
<div className="content">
{this.state.list.map((item, index) => {
return (
<div className="item" key={index}>
<h3 className="item_cate">{item.title}</h3>
<ul className="item_list">
{item.list.map((food, index2) => {
return (
<li key={index2}>
<div className="inner">
<Link to={`/pcontent/${food._id}`}>
<img src={`${this.state.api}${food.img_url}`} alt=""/>
<p className="title">{food.title}</p>
<p className="price">¥{food.price}</p>
</Link>
</div>
</li>
);
})}
</ul>
</div>
);
})}
</div>
五、react-router4.x跳转到菜品详情传值
App.js
<Route path="/pcontent/:id" component={Pcontent}></Route>
Home.js
<Link to={`/pcontent/${food._id}`}>
......
</Link>
Pcontent.js
componentDidMount() {
var id = this.props.match.params.id;
this.requestData(id);
}