react的路由以及传值方法

Posted 2020-11-24 wulicute-ts

1.下载路由

npm i router-react-dom --S

2.引入

import {Link,Route} from ‘react-router-dom‘

3.使用Link标签

 <Link to=‘/‘>Home</Link>

4.路由展示

exact 精准匹配路由

component={Home}  指定js文件

path={"/"} url路由地址

<Route path={"/"} exact component={Home}></Route>

传值

1.params的路由传值

配置路由

const id = 123;

配置直接在路由拼接变量id

<Link to={‘/about/‘+id+‘/‘+name}>About</Link>

在展示区域添加/:id

<Route path={"/about/:id"} component={about}></Route>

在展示的js里使用

this.props.match.params.id

接收

params特点

1.需要路由配置

2.刷新网页值还存在

3.如果传参数过多,url网址太长

 

2.query传值不需要配置路由

在路由上添加

pathname:‘/mine‘路由地址

query:obj对象形式传值

<Link to={{pathname:‘/mine‘,query:obj}}>Mine</Link>

 在子展示页面使用

this.props.location.query

接收

this.props.location.query.id

query的特点

1.不需要配置路由

2.刷新网页值被销毁

3.可以传对象

          网页销毁后可以,存入

　　　　　　　　　localstroge.setItme()或者sessionstorage.setItme()进行存储,

　　　　　　　　   刷新可以从localstroge或者sessionstorage中获取

3.state方式传值

state传值和query方式基本一样把其中的所有的query全部换成state就可以

在路由上添加

pathname:‘/mine‘路由地址

state:obj对象形式传值

<Link to={{pathname:‘/mine‘,state:obj}}>Mine</Link>

 在子展示页面使用

this.props.location.state

接收

this.props.location.state.id

 

params的特点

1.不需要配置路由

2.刷新网页值不会被销毁

3.可以传对象

　　　　刷新不会网页值不会被销毁,

然而重新输入当前网址,网页的值会被销毁

query和state不会再url上显示,类似于post

params会在url上显示,类似于get