React Router是一个基于React之上的强大路由库,可以让你向应用中快速的添加视图和数据流,同时保持页面与URL间的同步。

1.安装: 

npm install --save react-router

2.问题说明:

刚开始的时候由于没有注意到版本信息,导致出现了一些错误,现在记录如下:

这是我package.js中的版本信息,

说明1:react-router的2.x版本和4.x版本不兼容,默认下载的4.x的版本,我这里选择的是2.x版本不然会报 “

TypeError: Cannot read property 'location' of undefined”

说明2:react 16和react-router2.x的版本不兼容,会报“TypeError: Cannot read property 'func' of undefined”,我这里讲react降级到了15

3.路由配置:

(1)路由配置是一组指令,用来告诉router如何匹配URL

React.render((
<Router>
<Route path="/" component={App}>
<Route path="about" component={About}>
<Route path="inbox" component={Message}>
</Route >
</Router>
),doucument.body);

  其中<Route>中指定路径path 和 需要显示的组件component相匹配,并且Route之间允许嵌套,如上:About组件的路径就是“/about”。

(2)<IndexRoute>组件放在可以添加首页效果 ,在还未点击about,或者inbox时,自动显示在页面上,即类似在当请求的的URL匹配某个目录时,允许你指定一个类似index.html的入口文件。

ReactDOM.render(
<Router>
<Route path="/" component={App}>
<IndexRoute component={DashBoard}/>
<Route path="about" component={About}/>
<Route path="inbox" component={Inbox}>
<Route path="message/:id" component={Message}/>
</Route>
</Route>
</Router>
, document.getElementById('root'));

显示效果如下:

URL路径与组件的联系如下:

如果在<Route>中将Message的路径改为绝对路径,如“/messages/:id”,

则最后一个URL与路径的匹配改为:/messages/:id-》app->Inbox->Message

(3)上面一条的最后我们改了URL,这使得旧的URL会出现错误界面,这时,我们可以通过<Redirect>这个组件使得原来的URL也可以正常工作。

ReactDOM.render(
<Router>
<Route path="/" component={App}>
<IndexRoute component={DashBoard}/>
<Route path="about" component={About}/>
<Route path="inbox" component={Inbox}>
<Route path="/message/:id" component={Message}/>
<Redirect from="message/:id" to="/message/:id"/>
</Route>
</Route>
</Router>
, document.getElementById('root'));

(4)路由匹配的原理

三个属性来决定是否匹配一个URL:

  • 嵌套关系

嵌套路由被描述成一个树形结构,并且通过深度优先遍历寻找一个与给定URL相匹配的路由。

  • 路径语法

路由路径是匹配一个(或一部分)URL 的 一个字符模式串。大部分的路由路径都可以直接按照字面量理解,除了几个特殊的符号:

    :paramName – 匹配一段位于 /? 或 # 之后的 URL。 命中的部分将被作为一个参数

    () – 在它内部的内容被认为是可选的

    * – 匹配任意字符(非贪婪的)直到命中下一个字符或者整个 URL 的末尾,并创建一  个 splat参数

  • 优先级

路由算法会根据定义的顺序自顶向下匹配路由。因此,当你拥有两个兄弟路由节点配置时,你必须确认前一个路由不会匹配后一个路由中的路径

4.Histories

React Router 是建立在 还是history之上的。 简而言之,一个 history 知道如何去监听浏览器地址栏的变化, 并解析这个 URL 转化为 location 对象, 然后 router 使用它匹配到路由,最后正确地渲染对应的组件。

(下面介绍一下history)

----------------------------------------分割线---------------------------------

history是一个JavaScript库,它允许您在JavaScript运行的任何地方轻松管理会话历史。history抽象了不同环境中的差异,并提供了一个最小的API,允许您管理历史堆栈、导航、确认导航和会话之间的持久状态。

history提供三种不同的方法去创建一个history对象,这取决于你的环境

createBrowserHistory,createMemoryHistory,createHashHistory

我们主要运用到createBrowserHistory,下面以这个为例子:

 const history = createBrowserHistory();
const location = history.location;
const unlisten = history.listen((location, action) => { console.log(location);
});
history.push("/about",{some:"state"});
unlisten();

输出的location对象为:

其中的pathname项就是当前url的地址。

有关history更多的信息,可以参考:https://github.com/ReactTraining/history

-----------------------------又是一条分割线--------------------------------------------------------

在React Router中可以引入browserHistory

import { browserHistory } from 'react-router';

ReactDOM.render(
<Router history={browserHistory}>
<Route path="/" component={App}>
<IndexRoute component={DashBoard}/>
<Route path="about" component={About}/>
<Route path="inbox" component={Inbox}>
<Route path="/message/:id" component={Message}/>
<Redirect from="message/:id" to="/message/:id"/>
</Route> </Route>
</Router>
, document.getElementById('root'));

这样地址栏的地址会变为:

没有了奇怪的/#/

react-router的简单使用的更多相关文章

  1. React Router简单Demo

    简介 react router是使用react的时候首选的一个路由工具. 安装 react router包含react-router,react-router-dom和react-router-nat ...

  2. React Router基础使用

    React是个技术栈,单单使用React很难构建复杂的Web应用程序,很多情况下我们需要引入其他相关的技术 React Router是React的路由库,保持相关页面部件与URL间的同步 下面就来简单 ...

  3. 关于react router 4 的小实践

    详细代码栗子:https://github.com/wayaha/react-dom-CY clone然后 npm install npm start 分割线 1.这个项目使用create-react ...

  4. React Router 4.x 开发,这些雷区我们都帮你踩过了

    前言 在前端框架层出不穷的今天,React 以其虚拟 DOM .组件化开发思想等特性迅速占据了主流位置,成为前端开发工程师热衷的 Javascript 库.作为 React 体系中的重要组成部分:Re ...

  5. React router动态加载组件-适配器模式的应用

    前言 本文讲述怎么实现动态加载组件,并借此阐述适配器模式. 一.普通路由例子 import Center from 'page/center'; import Data from 'page/data ...

  6. React Router API文档

    React Router API文档 一.<BrowserRouter> 使用HTML5历史记录API(pushState,replaceState和popstate事件)的<Rou ...

  7. React Router 用法

    React Router 用法 一.DEMO import React from "react"; import { HashRouter as Router, Route, Li ...

  8. react router @4 和 vue路由 详解(全)

    react router @4 和 vue路由 本文大纲: 1.vue路由基础和使用 2.react-router @4用法 3.什么是包容性路由?什么是排他性路由? 4.react路由有两个重要的属 ...

  9. React Router基础教程

    React是个技术栈,单单使用React很难构建复杂的Web应用程序,很多情况下我们需要引入其他相关的技术 React Router是React的路由库,保持相关页面部件与URL间的同步 下面就来简单 ...

  10. [Web 前端] 你不知道的 React Router 4

    cp from https://segmentfault.com/a/1190000010718620 几个月前,React Router 4 发布,我能清晰地感觉到来自 Twitter 大家对新版本 ...

随机推荐

  1. oracle数据库学习记录(持续更新中...)

    --------------------------------------------day1------------------------------------------------- 1. ...

  2. code1068 乌龟棋

    暴力显然不行,所以考虑dp 记f[i][j][k][l]为使用i张1,j张2,k张3,l张4所得到的最大分数. 对于每个f[i][j][k][l],都可以由i-1张1,j张2,k张3,l张4所得到, ...

  3. 用kettle实现数据库迁移之oracle到mysql

    项目完成后,需要把历史oracle 的数据库转移mysql 用kettle 转换数据. 步骤: 1.打开spoon.bat,文件-->新建-->转换,点击“主对象树”,DB连接右键“新建” ...

  4. zuluCryt cli howto

    1.解锁卷的命令. zuluCrypt-cli -o -d /dev/sdc1 -m blabla -e ro -f /home/keyFile zuluCrypt-cli -o -d /dev/sd ...

  5. mysql 查询条件

    1简单查询   select* from 表名 select name as“姓名”fromstu     (把name改为名字) 2条件查询 where 后面跟条件  条件要写清楚 3模糊查询  l ...

  6. 【小梅哥FPGA进阶教程】串口发送图片数据到SRAM在TFT屏上显示

    十五.串口发送图片数据到SRAM在TFT屏上显示 之前分享过rom存储图片数据在TFT屏上显示,该方法只能显示小点的图片,如果想显示TFT屏幕大小的图片上述方法rom内存大小不够.小梅哥给了个方案,利 ...

  7. 解决word2013老是打开未响应情况

    问题:自己装了word2013时,每次打开word或者工作时,老是出现一个圈圈,提示未反应,是否关闭程序这样的提示: 解决方法:文件->选项->高级->显示->禁用硬件加速,将 ...

  8. Delphi webbrowser 的一些方法

    因为一个任务,最近几天一直在研究Webbrowser的相关功能,下面是收集到的一些方法 //根据URL获取请求Headerfunction GetAllHeaders(URL: string): st ...

  9. Fiddler2抓包

    https://www.cnblogs.com/conquerorren/p/8472054.html https://www.cnblogs.com/conquerorren/p/8472218.h ...

  10. 在 Mac OSX 上安装 nginx

    今天在使用 brew 安装 nginx 时,提示错误,安装不上去: brew install nginx, 提示:/usr/local is not writable. 这个是需要修改 /usr/lo ...