1. 通过state进行传参
2. 通过params进行传参
3. 通过query进行传参
统一引用
import React from 'react';
import {
BrowserRouter as Router,
Route,
Switch,
Link
} from 'react-router-dom';
通过state进行传参
示例
let obj = {
pathname:'/main',
state:{id:12,name:'dahuang1'}
};
class Index extends React.Component {
render () {
return (
<Router>
<ul>
<li>
<Link to="/header"> header</Link>
</li>
<li>
<Link to={obj}> main</Link>
</li>
<li>
<Link to={{pathname:'/box',state:{id:13,name:'这是第二个值'}}}> box</Link>
</li>
<li>
<Link to="/foot"> foot</Link>
</li>
</ul>
<Switch>
<Route path="/:main" component={ User }></Route>
</Switch>
</Router>
)
}
};
function User ( props ) {
console.log( props );
return (
<div>
<h2>通过state获取参数</h2>
<div>获取name:{ props.location.state.name }</div>
<div>获取name:{ props.location.state.id }</div>
</div>
)
};
解析
上面定义路由和传参的时候,用的是obj,根据react的方式 {{}} 第一个花括号是js,第二个花括号代表对象,我就把它单独拎出来了。(看自己需求)
开始传参
<Link to={obj}> main</Link>
接收参数
function User ( props ) {
console.log( props );
return (
<div>
<h2>通过state获取参数</h2>
<div>获取name:{ props.location.state.name }</div>
<div>获取name:{ props.location.state.id }</div>
</div>
)
};
在props中打印 location.state接收传参内容,不在路由里显示,隐式传参,刷新页面数据不会丢失
通过params进行传参
代码大致和上面类似,就不全部粘贴出来了。
开始传参
//先定义传参数值
constructor ( props ) {
super( props );
this.state = {
name:'1',
id:10,
footName:'1',
footId:20
}
}
let params = {
pathname:`/header/${this.state.name}/${this.state.id}`
}
//方式一:
<Link to={params}>header</Link>
//方式二:
<Link to={{ pathname:`/foot/${this.state.footName}/${this.state.footId}`}}>foot</Link>
接收参数
<Switch>
<Route path="/:header/:name/:id" component={ User } ></Route>
</Switch>
function User ( props ) {
console.log( props );
return (
<div>
<h2>通过state获取参数</h2>
<div>获取name:{ props.match.params.name }</div>
<div>获取name:{ props.match.params.id }</div>
</div>
)
};
在props中打印match.params内容,会在路由路径上面显示,刷新页面数据不会丢失
通过query进行传参
解析
开始传参
//先定义传参数值
let query = {
pathname:'/head',
query:{id:22,name:'张三'}
}
//方式一:
<Link to={query}>头部</Link>
//方式二:
<Link to={{pathname:'/main',query:{id:2,name:'你好'} }}>中间部分</Link>
接收参数
<Switch>
<Route path="/:head" component={ params }></Route>
</Switch>
function params ( props ) {
console.log(props);
return (
<div>
<h3>接收参数信息</h3>
<div>这是参数name:{ props.location.query.name }</div>
<div>这是参数id:{ props.location.query.id }</div>
</div>
)
};
在props中打印 location.query接收传参内容,不在路由里显示,隐式传参,刷新页面参数会丢失
** 路由传值,在React里面调用和Vue传值,Jquery传值,原始url传值类似,只是每一个框架都多了一个自己的声明包裹。**