浅谈react-router HashRouter和BrowserRouter的使用


Posted in Javascript onDecember 29, 2017

官网推荐的是BrowserRouter,但是此方式需要服务器配合,而且有点不好的是重定向只能到首页,无法停留在当前页,具体用法很简单,举例说明。

HashRouter

//react-router要求只只有一个字节点
//router内部的Link和Route会一一匹配,匹配到则加载对应的组件
//to 和 Route 的path是一样的(除了/结尾)
//比如点击关于我们to="/aboutUs"对应path="/aboutUs/",这样它就去加载AboutUs这个组件,其他组件没加载
//相比用state和回调实现,这种方式更为简单明了,而且浏览前进后退功能都支持
<HashRouter>
  <div id="wrapper">
    <Header />
    <ul className="nav navbar-nav">
      <li><Link to="/">首页</Link></li>
      <li><Link to="/classifiedDisplay">分类展示</Link></li>
      <li><Link to="/boutiqueCase">精品案例</Link></li>
      <li><Link to="/aboutUs">关于我们</Link></li>
    </ul>
    <Route exact path="/" component={Home}/>
    <Route exact path="/classifiedDisplay/" component={TypeShow}/>
    <Route exact path="/boutiqueCase/" component={JpShow}/>
    <Route exact path="/aboutUs/" component={AboutUs}/>
    <Footer />
  </div>
</HashRouter>

BrowserRouter

前端

同上方代码,只是把HashRouter换成了BrowserRouter组件。

服务器

以apache为例,.htaccess添加重写规则。(需先开启可重写设置)

#配和react-router,自行忽略写的比较low的正则
RewriteEngine on
RewriteRule classifiedDisplay$ http://www.yangqingcheng.xin/
RewriteRule boutiqueCase$ http://www.yangqingcheng.xin/
RewriteRule aboutUs$ http://www.yangqingcheng.xin/

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript与asp.net(c#)互相调用方法
Dec 13 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
Nov 19 Javascript
js中判断文本框是否为空的两种方法
Jul 31 Javascript
JS 数字转换研究总结
Dec 26 Javascript
javascript学习笔记(一)基础知识
Sep 30 Javascript
js简单实现点击左右运动的方法
Apr 10 Javascript
jquery心形点赞关注效果的简单实现
Nov 14 Javascript
JS实现的适合做faq或menu滑动效果示例
Nov 17 Javascript
基于bootstrap实现多个下拉框同时搜索功能
Jul 19 Javascript
babel的使用及安装配置教程
Feb 22 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
Mar 29 Javascript
利用Electron简单撸一个Markdown编辑器的方法
Jun 10 Javascript
javaScript 连接打印机,打印小票的实例
Dec 29 #Javascript
深入浅析vue组件间事件传递
Dec 29 #Javascript
详解Vue 事件修饰符capture 的使用
Dec 29 #Javascript
react-router browserHistory刷新页面404问题解决方法
Dec 29 #Javascript
node简单实现一个更改头像功能的示例
Dec 29 #Javascript
JavaScript 中使用 Generator的方法
Dec 29 #Javascript
js中url对象化管理分析
Dec 29 #Javascript
You might like
php addslashes和mysql_real_escape_string
2010/01/24 PHP
smarty半小时快速上手入门教程
2014/10/27 PHP
PHP面向对象程序设计高级特性详解(接口,继承,抽象类,析构,克隆等)
2016/12/02 PHP
PHP简单实现循环链表功能示例
2017/11/10 PHP
PHP回调函数简单用法示例
2019/05/08 PHP
PHP Web表单生成器案例分析
2020/06/02 PHP
Jquery在IE7下无法使用 $.ajax解决方法
2009/11/11 Javascript
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
2010/01/22 Javascript
IE6/7/8/9不支持exec的简写方式
2011/05/25 Javascript
jquery()函数的三种语法介绍
2013/10/09 Javascript
基于javascript实现判断移动终端浏览器版本信息
2014/12/09 Javascript
javascript针对不确定函数的执行方法
2015/12/16 Javascript
JS 日期与时间戮相互转化的简单实例
2016/06/22 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
2017/09/21 jQuery
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
2017/12/09 Javascript
利用Vue构造器创建Form组件的通用解决方法
2018/12/03 Javascript
基于Node.js搭建hexo博客过程详解
2019/06/25 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
2019/08/16 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
2020/03/03 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
2020/10/24 Javascript
Android模拟器无法启动,报错:Cannot set up guest memory ‘android_arm’ Invalid argument的解决方法
2016/07/01 Python
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
详谈pandas中agg函数和apply函数的区别
2018/04/20 Python
TensorFlow实现卷积神经网络
2018/05/24 Python
Django对models里的objects的使用详解
2019/08/17 Python
Python urllib.request对象案例解析
2020/05/11 Python
Python数据可视化常用4大绘图库原理详解
2020/10/23 Python
Seavenger官网:潜水服、浮潜、靴子和袜子
2020/03/05 全球购物
幼儿园中班教学反思
2014/02/10 职场文书
遗产继承公证书
2014/04/09 职场文书
中学生旷课检讨书模板
2014/10/08 职场文书
2014年机关党建工作总结
2014/11/11 职场文书
活动经费申请报告
2015/05/15 职场文书
社区党务工作总结2015
2015/05/19 职场文书
入党申请书怎么写?
2019/06/11 职场文书