react-router @4用法整理

piglei 发布于2019-08-21 17:52 / 364人阅读

摘要：官方文档源码这篇文章主要介绍了的基本用法包括动态路由编程式导航等安装用法动态路由的基本用法编程式导航总结安装用法示例代码关于路由重定向使用的格式注意位置需要在定义路由的后面比如重定向就需要写在后面关于路由匹配默认写在路由末尾前

router@4

react-router@4官方文档
github源码

这篇文章主要介绍了react-router@4的基本用法,包括动态路由,编程式导航等

安装

switch用法

动态路由的基本用法

编程式导航(withRouter)

总结

安装

npm i react-router-dom -S

switch用法
示例代码:

import { Switch, BrowserRouter as Router, Route, Redirect} from "react-router-dom";
class SwitchCom extends Component {
    render() {
        return (
            
                
                    
                    
                    
                               
                    
                    
                    
                
            
        )
    }
}

关于路由重定向: 使用Redirect..from..to的格式,注意位置需要在定义to路由的后面,比如to="/home",重定向就需要写在Route path="/home" 后面
关于404路由匹配,默认写在路由末尾,前面的路由都不匹配时,自动匹配404
关于Route,必须写在Router标签里面,否则会报错

3.动态路由的基本用法:

import { BrowserRouter as Router, Route, NavLink} from "react-router-dom";

    
    
    
    
    
        首页列表项目 
        资讯
        课程
        我的

上面的exact表示绝对匹配/index,如果不注明exact,则/index还会匹配/index/new等等
上面代码实现了一个类似tabbar切换的效果

关于NavLink 和 Link:
如果仅仅需要匹配路由,使用Link就可以了,而NavLink的不同在于可以给当前选中的路由添加样式, 比如上面写到的activeStyle和activeClassName

4.编程式导航(withRouter用法)

import {withRouter} from "react-router-dom";

goBack(){
    this.props.history.goBack();
}  
goDetail(){
    this.props.history.push("/detail");
}  
goDetailWithParam(item){
    this.props.history.push({pathname : "/cart",state:{item}});
}
    

    

//这里的item来自for循环的每一项


export default withRouter(Header);

引入withRouter之后,就可以使用编程式导航进行点击跳转, 需要注意的是export default的暴露如上面所写,如果结合redux使用,则暴露方式为: withRouter(connect(...)(MyComponent))
调用history的goBack方法会返回上一历史记录
调用history的push方法会跳转到目标页,如上面goDetail方法
跳转传参: push()可以接收一个对象参数,跳转之后,通过this.props.location.state接收

5 总结:
刚做过一个React的项目,搭配路由选择了react-router @4 ,收获挺多的,打算写文章记录一下收获(也算是遇到的一些坑). 感觉@4比之前的router版本更加灵活一些,用法也更加简洁.还是挺好用的.官方文档也只是用到哪些就看一看,并没有从头看到尾,所以理解还不是很深刻,如果上面理解有偏差,还望指出,共同进步.

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90144.html

前端学习资源整理

稍微整理了一下自己平时看到的前端学习资源，分享给大家。 html MDN：Mozilla开发者网络 SEO：前端开发中的SEO css 张鑫旭：张鑫旭的博客 css精灵图：css精灵图实践栅格系统：详解CSS中的栅格系统媒体查询：css媒体查询用法 rem布局：手机端页面自适应布局移动前端开发之viewport的深入理解:深入理解viewport 淘宝前端布局：手机淘宝移动端布局 fl...

siberiawolf 2019-08-21 11:27 评论0 收藏0
react+react-router4+redux最新版构建分享

摘要：相关配置请参考中文文档。关于的更多使用方法及理解需要详细具体讲解，涉及篇幅较大，本文暂不涉及，有兴趣可以看文档中文文档，我会整理后再单独章节分享接下来我们将编写路由组件这与有一些差别，原来的方法已经不再使用，在中或组件从中引入。相信很多刚入坑React的小伙伴们有一个同样的疑惑，由于React相关库不断的再进行版本迭代，网上很多以前的技术分享变得不再适用。比如react-...

weapon 2019-08-21 11:53 评论0 收藏0
react-router4以后动态加载解决办法（code-split）

摘要：都升级到了，之前用的，想用新建个项目用一下首先是用法变了，使用了，本以为错误在这里，折腾半天发现不是，第二官方的方案看文档，不多说，但是，一定会遇到如下报错了半天，里，方法里，改写为世界安静了地址 react-router都升级到5.0了，之前用的2.*，想用create-react-app新建个项目用一下首先是react-router-redux用法变了，使用了ConnectedR...

FingerLiu 2019-08-20 16:38 评论0 收藏0
[ 一起学React系列 -- 11 ] React-Router4 (1)

摘要：中的包中的包主要有三个和。的理念上面提到的理念是一切皆组件以下统一称组件。从这点来说的确方便了不少，也迎合一切皆组件的理念。组件是中主要的组成单位，可以认为是或的路由入口。将该标示为严格匹配路由。的属性追加一条。 2019年不知不觉已经过去19天了，有没有给自己做个总结？有没有给明年做个计划？当然笔者已经做好了明年的工作、学习计划；同时也包括该系列博客剩下的博文计划，目前还剩4篇：分别...

tinysun1234 2019-08-23 14:49 评论0 收藏0
手挽手带你学React：三档 React-router4.x的使用

摘要：我们在内部来渲染不同的组件我们这里采用哈希路由的方式，鉴于的渲染机制，我们需要把值绑定进入内部。手挽手带你学React入门三档,带你学会使用Reacr-router4.x,开始创建属于你的React项目什么是React-router React Router 是一个基于 React 之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。通俗一...

SunZhaopeng 2019-08-23 15:11 评论0 收藏0