浅谈react-router HashRouter和BrowserRo

官网推荐的是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中文网。

原文链接:www.jb51.net

上一篇:JSJS的prototype和__proto__
下一篇:详解react-router 4.0 下服务器如何配合B

相关推荐

  • 浅谈:快速理解JS的原型与原型链

    JavaScript中有基本类型和复杂类型的区分。 当我们在声明一个基本类型时: var n1= 1; console.log(n1); //1这时我们可以用Number方法将1包装为对象,即声明一个...

    2 年前
  • 浅谈:js后加?v=版本号的原因

    &lt;script src="/js/common.js?v=1.0.1" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;原由 ...

    2 年前
  • 浅谈高性能web前端技术栈——如何让小白轻松上手

    下面分别从以下几点开篇:图片地图,CSS Sprites,内联图片,样式表合并,脚本文件合并,脚本文件加载和执行。 图片地图:服务器端图片地图和客户端图片地图。 操作原理:利用用户点击图片的x,y坐...

    3 年前
  • 浅谈面试中常考的两种经典布局——圣杯与双飞翼

    圣杯和双飞翼布局介绍 最近正好碰到了写这种布局,一直没有总结过正好借这次机会总结一波,同时加强一下自己的理解。 博客链接:http://www.xluos.com/index.ph... 圣杯布局和...

    3 年前
  • 浅谈隐式类型转换与显示类型转换的那些事

    隐式类型转换 number类型转string类型 //先定义一个number类型的变量 //只要string类型跟boolean类型还是number类型用+号,其他类型都会被转为字符串 var num...

    2 年前
  • 浅谈键盘上回车按钮的JavaScript触发事件

    input 的回车触发事件。 简单,就当做个笔记咯。 $("#querySearcher").live("keyup", function (e) { if (e.keyCode == 1...

    4 年前
  • 浅谈谷歌浏览器是如何工作的?

    前言 其实这篇文章只是对Inside look at modern web browser系列文章的总结。之前看过别人翻译的,感觉不是很通顺,就自己看了原文,并记录下个人的理解。

    1 个月前
  • 浅谈虚拟列表实现与原理分析

    前言 虚拟列表可以说是一个很常见的需求场景了。 什么是虚拟列表?在我们日常生活中,刷不到底的新闻 Feed 流,无尽图片瀑布流、超级超级长的排行榜等等。对于这种场景,我们不可能一次性加载完所有数据,因...

    2 个月前
  • 浅谈节流与防抖

    节流和防抖在开发项目过程中很常见,例如 input 输入实时搜索、scrollview 滚动更新了,等等,大量的场景需要我们对其进行处理。我们由 Lodash 来介绍,直接进入主题吧。

    1 年前
  • 浅谈自然语言处理中的词向量

    文/晗灵 1.词向量是什么 正如下图所示:语谱图带有语音信号丰富的特征;图片天然的矩阵密集表示直接可供计算机理解;词向量的意义正在于,将计算机不可直接理解的文字信息表示为可理解的数字向量,并内蕴...

    6 个月前

官方社区

扫码加入 JavaScript 社区