浅谈react-router HashRouter和BrowserRouter的使用
官网推荐的是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/
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍浅谈React之状态(State)，包括了浅谈React之状态(State)的使用技巧和注意事项，需要的朋友参考一下 在React当中，当你更新组件的state，然后新的state就会重新渲染到页面中。在这个时候不需要你操作任何DOM。你也可以认为组件在React当中是一个状态机（State Machines）。当用户进行操作时会实现不同的状态，然后再渲染到你的页面中，让你的页面与数
-
DelayQueue是一个无界阻塞队列，只有在延迟期满时才能从中提取元素。该队列的头部是延迟期满后保存时间最长的Delayed 元素。 DelayQueue阻塞队列在我们系统开发中也常常会用到，例如：缓存系统的设计，缓存中的对象，超过了空闲时间，需要从缓存中移出；任务调度系统，能够准确的把握任务的执行时间。我们可能需要通过线程处理很多时间上要求很严格的数据，如果使用普通的线程，我们就需要遍历所有的
-
本文向大家介绍浅谈javascript中的 “ && ” 和 “ || ”，包括了浅谈javascript中的 “ && ” 和 “ || ”的使用技巧和注意事项，需要的朋友参考一下 有时候，我们会在jQuery框架或者其他js插件中发现里面有很多 “ && ” 和 “ || ”，那么这两个标识到底是什么含义？怎么使用？我觉得还是有必要稍微深究一下。 一、原理: && 操作符特点：逻辑运算表达式中
-
本文向大家介绍浅谈JSON.parse()和JSON.stringify()，包括了浅谈JSON.parse()和JSON.stringify()的使用技巧和注意事项，需要的朋友参考一下 1.parse 用于从一个字符串中解析出json 对象。例如 var str='{"name":"cpf","age":"23"}' 经 JSON.parse(str) 得到： ps:单引号写在{}外，每个属性都
-
本文向大家介绍浅谈react+es6+webpack的基础配置，包括了浅谈react+es6+webpack的基础配置的使用技巧和注意事项，需要的朋友参考一下 这是模块化开发、主流框架和最新版的ECMAScript语法规范的一个小demo 准备工作 安装 nodeJs 首先进入node官网，去下载最新版的nodeJs webpack 安装webpack 参数-g表示全局安装webpack，你在cm
-
本文向大家介绍浅谈react性能优化的方法，包括了浅谈react性能优化的方法的使用技巧和注意事项，需要的朋友参考一下 React性能优化思路 软件的性能优化思路就像生活中去看病，大致是这样的： 使用工具来分析性能瓶颈（找病根） 尝试使用优化技巧解决这些问题（服药） 使用工具测试性能是否确实有提升（疗效确认） 初识react只是为了尽快完成项目，后期进行代码审查时候发现有很多地方需要优化，因此做了