react路由怎么传递参数

params参数

• 路由链路(携带参数)： <Link to = {/demo/test/tom/18}> </Link >
• 注册路线(已收到领款申请)： <Route path= /demo/test/:name/:age component={Test} />
• 接收参数： this.props.match.params
• 缺点：只能传递字符串，不能传递对象，并且许多参数领先url过长

search参数

• 路由链路(携带参数)： <Link to = {/demo/test?name=tom&age=18}></Link>
• 注册路线(无需申报收到)： <Route path=/demo/test component={Test} />
• 接收参数： this.props.location.search
• 注：已收到search是 urlencoded 编码字符串，必填qs解析
• 缺点：只能传递字符串，不能传递对象，并且许多参数领先url过长

query参数

• 路由链路(携带参数)： <Link to = { { pathname: /demo/test , query: {name: tom,age:18} }}></Link>
• 注册路线(无需申报收到)： <Route path=/demo/test component={Test} />
• 接收参数： this.props.location.query
• 优点：对象可以传递
• 缺点： HashRouter 刷新地址栏，缺少参数， BrowserRouter 参数不会丢失

state参数

• 路由链路(携带参数)： <Link to = { { pathname: /demo/test , state: {name:tom,age:18} }}></Link>
• 注册路线(无需申报收到)： <Route path=/demo/test component={Test} />
• 接收参数： this.props.location.state
• 优点：对象可以传递
• 缺点： HashRouter 刷新地址栏，缺少参数， BrowserRouter 参数不会丢失