React-Router的基本概念和小提示

2016-12-10

React-Router

和传统的网页不太一样，手机上以H5为代表的Mobile Web应用更加倾向于SPA(Single Page Application)，也就是说我在一个URL页面下可以通过JS动态切换HTML文本内容来达到页面切换的效果

但是前端程序员的思维还是离不开URL地址的概念，React-Router就是为了解决这一个问题，其使用URL来标记不同的页面内容，使用URL作为内容的标记位 但是实际浏览器的Location 并没有跳转。

详细教程可以参考阮一峰先生的Blog

React-Router的误解

虽然React结合WePack很适合来做SPA，但是React本身并不是强制要求SPA的，React只是一个网页模块化的工具

Router和Route

React-Router本身有两个Component，一个叫 Router 一个叫 Route 注意最后的小字母r，其中Router是Route的父组件。

Router: 路由器
Route: 路由节点

<Router history={hashHistory}>               <==注意这个带r
  <Route path="/" component={App}/>          <==这个不带r
  <Route path="/about" component={About}/>
</Router>

history

除了要注意Router和Route的区别之外，还要注意Router有个props叫做 history

history	作用
hashHistory	标准的单页面，根据URL中#号后的字符串决定内容
browserHistory	使用浏览器的URL，需要对服务端改造不然会404
createMemoryHistory	在服务器渲染的时候内存里的一个变量

其中hashHistory中根据sharp号进行解析，就更利于SPA的理解了，因为在通常情况下 href=# 代表浏览器文档的顶部，是文档内部的定位符号。所以说hashHistory的意思就是分析#定位符号后边的字符串，在不切换document的情况下切换内容。

导入Route作为Router的Props

我们可以单独写一个文件来管理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>
)

然后进行导入

1
2
3

import routes from "./router";

<Router history={hashHistory} routes={routes}/>

Route的嵌套

在节点的安排中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>