和传统的网页不太一样,手机上以H5为代表的Mobile Web应用更加倾向于SPA(Single Page Application),也就是说我在一个URL页面下可以通过JS动态切换HTML文本内容来达到页面切换的效果
但是前端程序员的思维还是离不开URL地址的概念,React-Router就是为了解决这一个问题,其使用URL来标记不同的页面内容,使用URL作为内容的标记位 但是实际浏览器的Location 并没有跳转。
详细教程可以参考 阮一峰先生的Blog
虽然React结合WePack很适合来做SPA,但是React本身并不是强制要求SPA的,React只是一个网页模块化的工具
React-Router本身有两个Component,一个叫 Router 一个叫 Route 注意最后的小字母r,其中Router是Route的父组件。
<Router history={hashHistory}> <==注意这个带r <Route path="/" component={App}/> <==这个不带r <Route path="/about" component={About}/> </Router>
除了要注意Router和Route的区别之外,还要注意Router有个props叫做 history
history | 作用 |
---|---|
hashHistory | 标准的单页面,根据URL中#号后的字符串决定内容 |
browserHistory | 使用浏览器的URL,需要对服务端改造不然会404 |
createMemoryHistory | 在服务器渲染的时候内存里的一个变量 |
其中hashHistory中根据sharp号进行解析,就更利于SPA的理解了,因为在通常情况下 href=# 代表浏览器文档的顶部,是文档内部的定位符号。所以说hashHistory的意思就是分析#定位符号后边的字符串,在不切换document的情况下切换内容。
我们可以单独写一个文件来管理Route
//router.jsx import React from "react"; // 引入react import {Route} from "react-router"; // 引入react路由 import {App, AllBugs, MyBugs} from "./containers"; // 引入各容器组件 export default ( <Route path="/" component={App}> <Route path="bug" component={AllBugs}> <Route path="my" component={MyBugs}/> </Route> </Route> )
然后进行导入
import routes from "./router"; <Router history={hashHistory} routes={routes}/>
在节点的安排中Route是可以嵌套的,但是不用手动添加嵌套的分割斜杠“/”
例如访问设置URL /bug/my
//阮一峰老师示例 <Route path="/" component={App}> <Route path="/bug" component={AllBugs}> <Route path="/my" component={MyBugs}/> <==错误,无法正常展示 </Route> </Route> //解决办法 <Route path="/" component={App}> <Route path="bug" component={AllBugs}> <Route path="my" component={MyBugs}/> <==正确 </Route> </Route>
而且不能在一行内写入多级目录
//多级目录 <Route path="/" component={App}> <Route path="bug" component={AllBugs} /> <Route path="bug/my" component={MyBugs} /> <==错误,无法正常展示 </Route> //解决办法 <Route path="/" component={App}> <Route path="bug" component={AllBugs}> <Route path="my" component={MyBugs}/> <==正确,每级只写一个 </Route> </Route>