react-router知识点

首先做react路由时我们需要引入:↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

import {
BrowserRouter as Router,
Route,
Link,
NavLink,
withRouter
} from ‘react-router-dom’;

注意点:
1 .Router标签只有一个包裹在最外层并且有一个唯一的子元素(div包裹其他),as代表起别名
2 .Router代表将要来显示视图的地方属性path:和url进行匹配的路径 component属性的值是{要加载的组件} exact代表的是精确匹配 eg:path="/news" 那么只匹配此路径否则path="/news/detail"也会被匹配到
<Link标签代表了浏览器切换的地址属性 to代表地址的变化和<Router的path属性做匹配
<NavLink 用法和<Link 一致但是可以自带当前的active样式添加activeClassName属性值是类名,可以在路由切换样式时自动变化或者是使用activeStyle={{color:“red”}}
在这里插入图片描述
Match对象…每一个跳转过去的组件中都有一个match对象是一个匹配参数路径的对象可以通过this.props.match.params获取传递过来的参数

通过点击商品详情传递过来的商品id 可以这样获取,根据商品id请求商品详情,进而通过setState赋值给state中,在页面中展示

方式一：
通过params
1.路由表中

<Route path=' /sort/:id '   component={Sort}></Route>

2.Link处
HTML方式

<Link to={ ' /sort/ ' + ' 2 ' }  activeClassName='active'>XXXX</Link>

3.sort页面
通过 this.props.params.id 就可以接受到传递过来的参数（id）
　　　　　　　　　　　
方式二：
通过query
前提：必须由其他页面跳过来，参数才会被传递过来
　　　注：不需要配置路由表。
1.路由表中
路由表中的内容照常：<Route path='/sort' component={Sort}></Route>
2.Link处
HTML方式

 <Link to={{ path : ' /sort ' , query : { name : 'sunny' }}}>

2.加载出来的组件接收参数
this.props.location.query.name获取

方式三：
通过state
同query差不多，只是属性不一样，而且state传的参数是加密的，query传的参数是公开的，在地址栏
1.Link 处
HTML方式：

 <Link to={{ pathname : ' /sort ' , state : { name : 'sunny' }}}>

2.加载出来的组件接收参数
this.props.location.state.name获取

方式四： [编程式导航]
前提：必须由其他路径(或者说是别的组件切换过来)跳过来,参数才会被传递过来
导入对应的withRouter
在这里插入图片描述

2.使用withRouter包裹组件然后导出
在这里插入图片描述

3.使用编程式导航,在DOM元素中定义方法,方法中写入this.props.history.push({pathname:"/query",query:{name:“xuyingjie”,age:68}});
在这里插入图片描述
pathname和Route标签中的path做匹配,在加载的组件中如何获取参数呢?
this.props.location.query.name获取参数

如果我通过state传递参数只需要将两个地方的query变成state就OK了.
在这里插入图片描述

猜你喜欢