React中传参方式有很多，通过路由传参的方式也是必不可少的一种。本文记录项目中会用到的路由传参方式： 路由跳转传参API + 目标路由获取参数的方式。一、动态路由一、动态路由一、动态路由跳转方法跳转方法Link
跳转新增页面
跳转新增页面history.push
this.props.history.push("/user/add/1");
this.props.history.push("/user/add/1");获参方法获参方法
this.props.match.params
this.props.match.params二、路由query显示参数二、路由query显示参数二、路由query显示参数Link跳转


跳转新增页面



跳转新增页面
history.push
this.props.history.push({

pathname: "/user/add",

//参数

query: { id: 1 },

});
this.props.history.push({

pathname: "/user/add",

//参数

query: { id: 1 },

});获参方法获参方法
this.props.location.query
this.props.location.query三、路由state隐式参数 三、路由state隐式参数 三、路由state隐式参数 Link跳转Link跳转


跳转新增页面




跳转新增页面

history.push
this.props.history.push({

pathname: "/user/add",

state: { id: 1 },

});
this.props.history.push({

pathname: "/user/add",

state: { id: 1 },

});获参方法获参方法
this.props.location.state
this.props.location.state代码DEMO代码DEMO代码DEMO入口App组件入口App组件
class App extends React.Component {
render() {

return (





//动态路由



{/* */}



);
}
}
class App extends React.Component {
render() {

return (





//动态路由



{/* */}



);
}
}动态路由DemoUser组件User组件
import React, { Component } from "react";
import { Link } from "react-router-dom";

export default class User extends Component {
render() {

return (



);
}
}
import React, { Component } from "react";
import { Link } from "react-router-dom";

export default class User extends Component {
render() {

return (



);
}
}UserAdd组件UserAdd组件
import React, { Component } from "react";

export default class UserAdd extends Component {
render() {

console.log("this.props.match.params:", this.props.match.params);

return ;
}
}
import React, { Component } from "react";

export default class UserAdd extends Component {
render() {

console.log("this.props.match.params:", this.props.match.params);

return ;
}
} 路由query显示参数DemoUser组件User组件
import React, { Component } from "react";
import { Link } from "react-router-dom";

export default class User extends Component {
render() {

return (



);
}
}
import React, { Component } from "react";
import { Link } from "react-router-dom";

export default class User extends Component {
render() {

return (



);
}
} 路由state隐式参数DemoUser组件User组件
import React, { Component } from "react";
import { Link } from "react-router-dom";

export default class User extends Component {
render() {

return (



);
}
}
import React, { Component } from "react";
import { Link } from "react-router-dom";

export default class User extends Component {
render() {

return (



);
}
}