路由的两种方式:
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>