React入门随记——路由传值

路由的两种方式：

to:
    1、字符串:"/one"
    2、对象:{pathname:'/one'}

  <NavLink className={"App-link"} activeClassName={"App-active"} to={"/one"}>One</NavLink>

 <NavLink className={"App-link"} activeClassName={"App-active"} to={{ pathname: '/one', query: { a: 1, b: { id: 12, type: 88 } } }}>One</NavLink>

传值都用第二种方式

********************路由传值************************************************************

********1、通过query形式进行传值*********

<NavLink
      className={"App-link"}
      activeClassName={"App-active"}
      to={{pathname:'/one',query:{a:1,b:2}}}>One</NavLink>

接受值：在one.jsx中 ，通过 this.props.location.query，它可以传递对象

缺点：刷新数据丢失

********2、state方式*********

<NavLink
      className={"App-link"}
      activeClassName={"App-active"}
      to={{
          pathname:'/two',
          state:{c:3,d:{id:2,type:90}}
      }}>Two</NavLink>

通过 this.props.location.state 

特点：刷新不会丢失。可以接收对象。*如果该地址重新打开数据会丢失。

********3、params传值 *********

 <NavLink className={"App-link"}
       activeClassName={"App-active"}
       to={{pathname:'/three/1/33'}}>Three</NavLink>

通过 this.props.match.params 接受值

特点：刷新数据不会丢失。不可以直接传对象。

可以这样玩：

<NavLink className={"App-link"}
                        activeClassName={"App-active"}
                        to={"/three/19-39.html"}>Three</NavLink>

 <Route component={Three} path={"/three/:id-:type.html"}></Route>