浅谈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 相关文章推荐
用js实现控制内容的向上向下滚动效果
Jun 26 Javascript
javascript中&quot;/&quot;运算符常见错误
Oct 13 Javascript
{}与function(){}选用空对象{}来存放keyValue
May 23 Javascript
JavaScript实现的日期控件具体代码
Nov 18 Javascript
JS取得绝对路径的实现代码
Jan 16 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
Mar 27 Javascript
JavaScript整除运算函数ceil和floor的区别分析
Apr 14 Javascript
Javascript仿京东放大镜的效果
Mar 01 Javascript
vue.js指令和组件详细介绍及实例
Apr 06 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
Oct 22 Javascript
vue路由切换之淡入淡出的简单实现
Oct 31 Javascript
vue项目中使用vue-layer弹框插件的方法
Mar 11 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 IDE PHPStorm配置支持友好Laravel代码提示方法
2015/05/12 PHP
php示例详解Constructor Prototype Pattern 原型模式
2015/10/15 PHP
PHP实现的线索二叉树及二叉树遍历方法详解
2016/04/25 PHP
JavaScript初学者应注意的七个细节详细介绍
2012/12/27 Javascript
当前页禁止复制粘贴截屏代码小集
2013/07/24 Javascript
jQuery获取和设置表单元素的方法
2014/02/14 Javascript
jQuery+ajax中getJSON() 用法实例
2014/12/22 Javascript
JavaScript插件化开发教程 (二)
2015/01/27 Javascript
jquery实现两个图片渐变切换效果的方法
2015/06/25 Javascript
JavaScript基于ajax编辑信息用法实例
2015/07/15 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
2015/08/28 Javascript
jquery拖拽效果完整实例(附demo源码下载)
2016/01/14 Javascript
AngularJS中isolate scope的用法分析
2016/11/22 Javascript
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
Js面试算法详解
2018/04/08 Javascript
Vue高版本中一些新特性的使用详解
2018/09/25 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
2019/03/29 Javascript
微信网页登录逻辑与实现方法
2019/04/29 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
[40:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs TNC
2018/04/01 DOTA
python进阶教程之函数对象(函数也是对象)
2014/08/30 Python
python使用webbrowser浏览指定url的方法
2015/04/04 Python
Python实现多进程共享数据的方法分析
2017/12/04 Python
Python中xrange与yield的用法实例分析
2017/12/26 Python
Python实现的字典排序操作示例【按键名key与键值value排序】
2018/12/21 Python
pytorch多进程加速及代码优化方法
2019/08/19 Python
python NumPy ndarray二维数组 按照行列求平均实例
2019/11/26 Python
利用python实现.dcm格式图像转为.jpg格式
2020/01/13 Python
Tensorflow实现多GPU并行方式
2020/02/03 Python
解决PyCharm IDE环境下,执行unittest不生成测试报告的问题
2020/09/03 Python
10分钟理解CSS3 FlexBox弹性布局
2018/12/20 HTML / CSS
院药学专业个人求职信
2013/09/21 职场文书
国贸专业个人求职信分享
2013/12/04 职场文书
快递员岗位职责
2014/09/12 职场文书
《伯牙绝弦》教学反思
2016/02/16 职场文书
秀!学妹看见都惊呆的Python小招数!【详细语言特性使用技巧】
2021/04/27 Python