react 路由传参

react 路由传参的四种方式

一. search 传参（刷新后页面不会丢失，参数会在地址栏显示，如：http://localhost:3000/input/?id=01&=‘adc’）

路由页面: 
   <Route path="/demo/" component={Demo}></Route>
路由跳转传递参数：
   <Link to={`/demo/?id=${this.state.demo.id}&=${this.state.demo.name}`}>demo</Link>
获取：
  this.props.location.search

二. params传参(刷新页面后参数不消失，参数会在地址栏显示，如：http://localhost:3000/input/01)

路由页面: 
	<Route path="/demo/:id" component={Demo}></Route>
路由跳转传递参数：
	链接方式：
		<Link to={'/demo/01'}>demo</Link>或
		<Link to={{pathname:'/demo/01'}}>demo</Link>
	js方式：
		this.props.history.push('/demo/01')  或：
		this.props.history.push({pathname:'/demo/01'})
获取：
	this.props.match.params.id

二. params多个参数传参

路由页面: 
    <Route path="/demo/:id/:name" component={Demo}></Route>
路由跳转传递参数：
    链接方式：
        <Link to={`/demo/${this.state.demo.id}/${this.state.demo.name}`}>demo</Link>
        <Link to={{pathname:`/demo/${this.state.demo.id}/${this.state.demo.name}`}}>demo</Link>
    js方式：
        this.props.history.push(`/demo/${this.state.demo.id}/${this.state.demo.name}`)
        this.props.history.push({pathname:`/demo/${this.state.demo.id}/${this.state.demo.name}`})
获取：
    this.props.match.params.id
    this.props.match.params.name

三. query传参(刷新页面参数会丢失)

路由页面: 
    <Route path="/demo" component={Demo}></Route>
路由跳转传递参数：
    链接方式：
        <Link to={{pathname:'/demo',query:{id: 1}}}>demo</Link>
    js方式：
        this.props.history.push({pathname:'/demo',query:{id:1}})
获取：
    this.props.location.query.id

四. state传参（启用的是BrowserRouter可以正常使用，用HashRouter刷新页面参数丢失）

路由页面: 
    <Route path="/demo" component={Demo}></Route>
路由跳转传递参数：
    链接方式：
        <Link to={{pathname:'/input',state:{id: '01'}}}>demo</Link>
    js方式：
        this.props.history.push({pathname:'/demo',state:{id: '01'}})
获取：
    this.props.location.state.id