Routing parameters
Whether it is vue or react, it is nothing more than jumping through
link routing,
using js to pass parameters,
or this.props.history.push() page jump,
or query,
params to pass parameters.
Usually the parameters are concatenated after the path. Or pass it in the form of an object, and the page will receive it.
Briefly talk about our common ways,
and finally talk about the more commonly used ways (loaction, state)
**1. Pass parameters in params
1. The parameters will not disappear after refreshing the page.
2. The parameters will be displayed in the address bar.
3. You need to configure the parameter name in Route
Disadvantages: It is inconvenient to pass too many values and the url will become very long.
Two: query parameter passing: routing page (no configuration required)
Advantages: Elegant parameter passing, objects can be passed through parameters;
Disadvantages: Refresh the address bar, parameters are lost.
3. Search parameter passing
Advantages: page refreshes, parameters will not be lost;
Disadvantages: passing too many values will make the url very long.
Four: state parameter passing
parameters will not disappear after refreshing the page and
parameters will not be displayed in the address bar
Routing page (no configuration required)
Advantages: Elegant parameter passing, passing parameters can pass objects;
Disadvantages: If you use HashRouter, refresh the page, the parameters will be lost;
* *
Detailed
Explanation Assume that parameters are passed through params. Let's configure a simple route first:
Routing configuration page
<Route path="/Capacity/manage/craft/view/:Id" component={production} />
params
1 Link parameter transfer, routing jump
这种写法我通常是在表格中使用，因为通过row我们可以直接拿到选中行的 Id, 直接给link就好了。
{
title: '工艺编码',
dataIndex: 'techCode',
align: 'center',
render: (value, record) => {
const { id } = record || {}; // recoed 就是选中行的信息 ，在这里解构赋值id ,直接拼接给跳转的路由就OK
return <Link to={`/Capacity/manage/craft/view/${id}`}>{value}</Link>;
}
// 或者 <Link to={ '/Capacity/manage/craft/view' + '121211'}>详情</Link>
// 或者 <Link to={
{pathname: '/Capacity/manage/craft/view/' + '121212'}}>跳转</Link>
},
The reception of the page is directly verified in the hook function.
Of course, you must state an id value yourself when verifying, to undertake to set a new value
async componentDidMount() {
this.setState({
id: this.props?.match?.params?.id
});
await this.findDeatil(this.state.id); // 拿到这个id 去调取详情、编辑或者其他接口就好了。
}
2 Use js to pass parameters,
this.props.router.push({
pathname: '/Capacity/manage/craft/view/' + '12121'
});
或者
this.props.router.push(
'/Capacity/manage/craft/view/'+'105'
);
Get parameters from another page
this.props.match.params.id
When we pass multiple parameters in params
routing page
<Route path='/production/:productionId/:productionType' component={production}></Route>
j assumes that the configuration in the page is like this
state = {
productionId: 120,
productionType: 'fruits'
}
Use Link to pass parameters
<Link to={
{
pathname:
`/production/${this.state.productionId}/${this.state.productionType}`
}}>跳转</Link>
Use js to pass parameters
this.props.router.push({
pathname:
`/demo/${this.state.productionId}/${this.state.productionType}`
});
Get parameters
this.props.match.params
query parameter
Routing page (no configuration required)
<Route path='/production' component={production}></Route>
Use Link to pass parameters
<Link to={
{pathname:'/production',query:{productionId:120,productionType:'fruits'}}}>跳转</Link>
Use js to pass parameters
this.props.router.push({pathname:'/production',query:{productionId:120,productionType:'fruits'}});
parameter acquisition
this.props.location.query
Three, state This is also commonly used to refresh the page after the parameter does not disappear The parameter will not be displayed in the address bar
Routing page (no configuration required)
<Route path='/production' component={production}></Route>
Use Link to pass parameters
<Link to={
{
pathname:
'/production',
state:{
productionId:12,
productionType:'fruits'
}
}}>跳转</Link>
Use js to pass parameters
this.props.router.push({
pathname:
'/production',
state:{
productionId:12,
productionType:'fruits'
}
});
Get parameters
this.props.location.state
or you do
handleview = ({ selectedRows }) => {
let row = selectedRows[0];
console.log(row);
// 去采购订单页面 传选中行的itemId
this.props.push({
pathname: `/purc/purcorder/index`,
state: { // 这里可以接收你传的任何方式，可以是对象，可以是数组。注意的是接受的页面记得处理你的数组或者对象，要保持一致。
itemIds: [
{
id: row.itemId,
itemCode: row.itemCode,
itemName: row.itemName
}
]
}
});
};
Four. search
routing page
<Route path='/web/departManange ' component={DepartManange}/>
settings page
<link to="web/departManange?tenantId=12121212">xxx</Link>
或者
this.props.history.push({pathname:"/web/departManange?tenantId" + row.tenantId});
Use to read parameters: this.props.location.search