转载

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

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的父组件。

  1. Router: 路由器
  2. 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>
)

然后进行导入

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>
原文  http://alanli7991.github.io/2016/12/10/ReactRouter的基本概念和小提示/
正文到此结束
Loading...