react路由传递参数的几种方法

params参数

• 路由链接（携带参数）：
• 注册路由（声明接收）：
• 接收参数：this.props.match.params
• 缺点：只能传字符串，不能传递对象，参数多导致url过长

search参数

• 路由链接（携带参数）：
• 注册路由（无需声明接收）：
• 接收参数：this.props.location.search
• 备注：接收到的search是urlencoded编码字符串，需要qs解析
• 缺点：只能传字符串，不能传递对象，参数多导致url过长

query参数

• 路由链接（携带参数）：{ pathname: '/demo/test' , query: {name: 'tom',age:18} }}>
• 注册路由（无需声明接收）：
• 接收参数：this.props.location.query
• 优点：可以传递对象
• 缺点：HashRouter刷新地址栏，参数丢失，BrowserRouter不会丢失参数

state参数

• 路由链接（携带参数）：{ pathname: '/demo/test' , state: {name:'tom',age:18} }}>
• 注册路由（无需声明接收）：
• 接收参数：this.props.location.state
• 优点：可以传递对象
• 缺点：HashRouter刷新地址栏，参数丢失，BrowserRouter不会丢失参数