一.动态路由
定义
<Route path="/content/:aid" component={Content} /> 传值
<Link to={`/content/${value.aid}`}>{value.title}</Link>获取
constructor(props) {
super(props);
this.state = { };
}
//生命周期函数
componentDidMount(){
//获取动态路由的传值
console.log(this.props.match.params.aid);
}二.get传值
传值
<li key={key}>
<Link to={`/productcontent?aid=${value.aid}`}>{value.title}</Link>
</li>获取（引入url模块）
//生命周期函数
componentDidMount(){
// this.props.location.search
//获取get传值
console.log(url.parse(this.props.location.search,true));
var query=url.parse(this.props.location.search,true).query;
console.log(query)
}
首页组件
/*
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 { BrowserRouter as Router, Route, Link } from "react-router-dom";
import './assets/css/index.css'
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';
class App extends Component {
render() {
return (
<Router>
<div>
<header className="title">
<Link to="/">首页</Link>
<Link to="/news">新闻</Link>
<Link to="/product">商品</Link>
</header>
<br />
<hr />
<br />
<Route exact path="/" component={Home} />
<Route path="/news" component={News} />
<Route path="/product" component={Product} />
<Route path="/productcontent" component={ProductContent} />
<Route path="/content/:aid" component={Content} />
</div>
</Router>
);
}
}
export default App;
动态路由
新闻组件
import React, { Component } from 'react';
import { Link } from "react-router-dom";
class News extends Component {
constructor(props) {
super(props);
this.state = {
list:[
{
aid:'11',
title:'我是新闻1111'
},
{
aid:'222',
title:'我是新闻222'
},
{
aid:'3',
title:'我是新闻333'
},
{
aid:'4',
title:'我是新闻4444'
}
]
};
}
render() {
return (
<div>
我是新闻组件
<ul>
{
this.state.list.map((value,key)=>{
return (
<li key={key}>
<Link to={`/content/${value.aid}`}>{value.title}</Link>
</li>
)
})
}
</ul>
</div>
);
}
}
export default News;
新闻详情组件
import React, { Component } from 'react';
class Content extends Component {
constructor(props) {
super(props);
this.state = { };
}
//生命周期函数
componentDidMount(){
//获取动态路由的传值
console.log(this.props.match.params.aid);
}
render() {
return (
<div>
我是新闻详情组件
</div>
);
}
}
export default Content;
get传值
import React, { Component } from 'react';
import { Link } from "react-router-dom";
class Product extends Component {
constructor(props) {
super(props);
this.state = {
list:[
{
aid:'11',
title:'我是商品1111'
},
{
aid:'222',
title:'我是商品222'
},
{
aid:'3',
title:'我是商品333'
},
{
aid:'4',
title:'我是商品4444'
}
]
};
}
render() {
return (
<div>
我是商品组件
<ul>
{
this.state.list.map((value,key)=>{
return (
<li key={key}>
<Link to={`/productcontent?aid=${value.aid}`}>{value.title}</Link>
</li>
)
})
}
</ul>
</div>
);
}
}
export default Product;
详情组件
import React, { Component } from 'react';
//url模块来解析url地址 在react里面使用url模块需要安装url模块 cnpm install url --save
import url from 'url';
class ProductContent extends Component {
constructor(props) {
super(props);
this.state = { };
}
//生命周期函数
componentDidMount(){
// this.props.location.search
//获取get传值
console.log(url.parse(this.props.location.search,true));
var query=url.parse(this.props.location.search,true).query;
console.log(query)
}
render() {
return (
<div>
我是商品详情组件
</div>
);
}
}
export default ProductContent;
