版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhaihaohao1/article/details/87912396
在 https://blog.csdn.net/zhaihaohao1/article/details/87911954 的基础上
实现get传值
结合下面的例子：
1、配置路由 在App.js中
<Route path="/product" component={Product}/>
<Route path="/productContent" component={ProductContent}/>
2、拼接要传的值 在Project.js 中
<Link to={'/productContent?aid='+value.aid}>{value.title}</Link>
3、接收传到的值 在ProductContent.js中
this.props.location.search
具体例子如下：
App.js 中
import React, { Component } from 'react';
import logo from './assets/images/logo.svg';
import './assets/css/App.css';
import Home from "./components/Home";
import Product from "./components/Product";
import ProductContent from "./components/ProductContent";
import {BrowserRouter as Router, Route, Link} from "react-router-dom";
/**
*
写博客先写get传值
在 14 React路由 react-router4.x的基本配置 的基础上 实现get传值
1、配置路由 在App.js中
<Route path="/product" component={Product}/>
<Route path="/productContent" component={ProductContent}/>
2、拼接要传的值 在Project.js 中
<Link to={'/productContent?aid='+value.aid}>{value.title}</Link>
3、接收传到的值 在ProductContent.js中
this.props.location.search
拿到传过来的值：
this.props.location.search
*/
class App extends Component {
render() {
return (
<div >
<Router>
<div>
{/* Link 组件实际上就是a连接*/}
<Link to="/">Home</Link><p/>
<Link to="/product">Product</Link><p/>
<hr/>
{/*根据浏览器中的路由，挂载组件*/}
{/* 例如：http://localhost:3000/news 加载的就是News组件 */}
<Route exact path="/" component={Home}/>
<Route path="/product" component={Product}/>
<Route path="/productContent" component={ProductContent}/>
</div>
</Router>
</div>
);
}
}
export default App;
Product.js 中
import React from 'react';
import {BrowserRouter as Router, Route, Link} from "react-router-dom";
class Product extends React.Component {
constructor(props) {
super(props);
this.state = {
list:[
{
aid:'1',
title:'我是商品1111'
},
{
aid:'2',
title:'我是商品222'
},
{
aid:'3',
title:'我是商品333'
},
{
aid:'4',
title:'我是商品4444'
}
]
};
}
render() {
return (
<div>
我是新闻组件
<ul>
{
this.state.list.map((value,key)=>{
return (
<li key={key}>
{/* 路由在App.js中已经配置过了 */}
{/* 这里直接写a连接，就可以了 */}
<Link to={'/productContent?aid='+value.aid}>{value.title}</Link>
{/*``是es6 的模板字符串，/content是路由，${value.aid} 是要传的值 */}
{/*<Link to={`/content/${value.aid}`}>{value.title}</Link>*/}
</li>
)
})
}
</ul>
</div>
);
}
}
export default Product;
ProductContent.js 中
import React from 'react';
import {BrowserRouter as Router, Route, Link} from "react-router-dom";
import url from 'url';
class ProductContent extends React.Component{
constructor(props){
super(props);
this.state={
title:'商品详情',
aid:'',
}
}
//生命周期函数
componentDidMount(){
//获取动态路由的传值
console.log(this.props.location.search);
// 使用url模块解析一下
let aid=url.parse(this.props.location.search,true).query;
// {aid:'1'}
console.log(aid);
this.setState({
aid:aid,
})
}
render() {
return(
<div>
{this.state.title}
<br/> <br/> <br/>
{'拿到get传过来的aid'+this.state.aid.aid}
</div>
);
}
}
export default ProductContent;
效果图：
源码下载：
rdemo15_get
https://download.csdn.net/download/zhaihaohao1/10980372
在 https://blog.csdn.net/zhaihaohao1/article/details/87911954 的基础上
实现动态路由传值
结合下面的例子：
配置动态路由，传值（配置动态路由也是为了传值，和get传值的功能一样）
App.js中 配置动态路由,aid是后面传的值
<Route path="/content/:aid" component={Content} />
News.js中，写Link（a连接），并且拼接参数
<Link to={'/content/'+value.aid}>{value.title}</Link>
Content.js中，拿到传递的参数 aid
this.props.match.params.aid
项目结构：
App.js
import React, {Component} from 'react';
import logo from './assets/images/logo.svg';
import './assets/css/App.css';
import Home from './components/Home';
import News from "./components/News";
import Product from "./components/Product";
import Content from "./components/Content";
import {BrowserRouter as Router, Route, Link} from "react-router-dom";
/**
写博客先写get传值
在 14 React路由 react-router4.x的基本配置 的基础上 配置动态路由
配置动态路由，传值（配置动态路由也是为了传值，和get传值的功能一样）
App.js中 配置动态路由,aid是后面传的值
<Route path="/content/:aid" component={Content} />
News.js中，写Link（a连接），并且拼接参数
<Link to={'/content/'+value.aid}>{value.title}</Link>
Content.js中，拿到传递的参数 aid
this.props.match.params.aid
*/
class App extends Component {
render() {
return (
<div>
<Router>
<div>
{/* Link 组件实际上就是a连接*/}
<Link to="/">Home</Link><p/>
<Link to="/news">News</Link><p/>
<Link to="/product">Product</Link><p/>
<hr/>
{/*根据浏览器中的路由，挂载组件*/}
{/* 例如：http://localhost:3000/news 加载的就是News组件 */}
<Route exact path="/" component={Home}/>
<Route path="/news" component={News}/>
<Route path="/product" component={Product}/>
{/* 配置动态路由,aid是后面传的值 */}
<Route path="/content/:aid" component={Content} />
</div>
</Router>
</div>
);
}
}
export default App;
News.js
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}>
{/* 路由在App.js中已经配置过了 */}
{/* 这里直接写a连接，就可以了 */}
<Link to={'/content/'+value.aid}>{value.title}</Link>
{/*``是es6 的模板字符串，/content是路由，${value.aid} 是要传的值 */}
{/*<Link to={`/content/${value.aid}`}>{value.title}</Link>*/}
</li>
)
})
}
</ul>
</div>
);
}
}
export default News;
Content.js
import React from 'react';
class Content extends React.Component{
constructor(props){
super(props);
this.state={
title:'新闻详情',
aid:'',
}
}
//生命周期函数
componentDidMount(){
//获取动态路由的传值
console.log(this.props.match.params.aid);
this.setState({
aid:this.props.match.params.aid,
})
}
render() {
return(
<div>
{this.state.title}
<br/> <br/> <br/>
{'拿到新闻列表页面传过来的aid>>>'+this.state.aid}
</div>
);
}
}
export default Content;
效果：
源码下载：
rdemo15
https://download.csdn.net/download/zhaihaohao1/10980372