react的路由以及傳值方法

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