react路由传参

react路由传递参数有三种形式。
1.通过query进行接收

<Route path={"/one"} component={one}></Route>
<NavLink className={"App-link"}  activeClassName={"App-active"} to={{pathname:"/one",query:{a:1,b:{c:3}}}}>One</NavLink>

接收时

componentDidMount(){
        if(this.props.location.query)
        console.log(this.props.location.query.a,this.props.location.query.b)
   }

特点：可以接收对象，但是如果刷新，数据不存在
2.通过state进行接收

 <Route path={"/two"} component={two}></Route>
 <NavLink className={"App-link"} exact  to={{pathname:"/two",state:{a:10,b:{c:30}}}}>two</NavLink>

接收时

componentDidMount(){
      console.log(this.props.location.state.a,this.props.location.state.b)
    }

特点：可以接受数据，刷新数据不会丢失，如果重新打开一个网页时会丢失数据
3.通过params接收

<Route path={"/three/:id/:type.html"} component={three}></Route> 
 <NavLink className={"App-link"} to={{pathname:"/three/3/4.html"}}>three</NavLink>

接收时

componentDidMount(){
     console.log(this.props.match.params.id,this.props.match.params.type,)
    }

特点：会更改地址，刷新页面数据不会丢失。这种是我们在浏览网页时经常会看到的一种形式

纯属个人理解。有误请指出