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-------请求远程数据,axios应用,渲染二维数组,渲染图片等
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='' />
<p className="title">{v.title}</p>
<p className="price">{v.price}元</p>
</div>
</Link>
</li>
)
})
}
</ul>
</div>
)
})
}
</div>
</div>
)
}
}
export default Home
Pcontent.js
import React from 'react'
class Pcontent extends React.Component {
constructor(props) {
super(props);
this.state = {
title: '产品详情'
};
}
render () {
return (
<div>
{this.state.title}
</div>
);
}
}
export default Pcontent;