react-router 总结

一、前言

react-router在网上找了很多资料和demo，才发现旧的一些demo根本运行不了，后来找到原因说是因为版本更新，新的版本与旧的版本差别很大，所以我这边做了这一期最新版本的组件的一些介绍。

另外这里只介绍 react-router-dom ,react-router-native暂不提及，当前react-router-dom的版本为5.0.1，react-router的版本也是5.0.1。

一、基本理解

1. react-router是针对react的一个插件库
2. 其专门用来实现一个 SPA 应用（单页Web应用：single page web application）
3. 基于 react 的项目基本都会用到此库
4. react-router 实现了路由的核心功能
5. react-router-dom 适用于PC端，加入了浏览器运行环境下的一些功能，依赖于react-router
6. react-router-native 适用于手机端，加入了react-native运行环境下的一些功能，依赖于react-router

二、react-router-dom 对应组件介绍
        react-router-dom源码 esm文件夹里的react-router-dom.js 里导出组件

export * from 'react-router’;//这里导出react-router里的所有内容
export { BrowserRouter, HashRouter, Link, NavLink };

在 react-router 源码中 esm文件夹里的react-router.js里导出组件。

export { MemoryRouter, Prompt, Redirect, Route, Router, 
StaticRouter, Switch, generatePath, matchPath, 
withRouter, context as __RouterContext };

下面根据导出的这些组件进行介绍。

三、BrowserRouter、HashRouter，MemoryRouter，NativeRouter，StaticRouter，Router

 用来包含路由的父组件，Link和Route等都必须在它们内才能使用

1. ：使用 HTML5 提供的 history API 来保持 UI 和 URL 的同步；
2. ：使用 URL 的 hash (例如：window.location.hash) 来保持 UI 和 URL 的同步；
3. ：能在内存保存你 “URL” 的历史纪录(并没有对地址栏读写)，就是页面跳转了，但是地址栏地址没变
4. ：为使用React Native提供路由支持；
5. ：从不会改变地址，路由跳转没反应
6. ：低级路由，适用于任何路由组件，主要和redux深度集成，使用必须配合history对象

    使用Router路由的目的是和状态管理库如redux中的history同步对接
            关于history插件的使用请看 http://www.cnblogs.com/ye-hcj/p/7741742.html

    import { Router } from 'react-router'
    import { createBrowserHistory } from 'history/createBrowserHistory'
    const history = createBrowserHistory();
    
        ...
       

四、
    点击时，url会更新，组件会被重新渲染，但是页面不会重新加载用来跳转路由的。
    Link 组件最终会渲染为 HTML 标签 ，它的 to、query、hash 属性会被组合在一起并渲染为 href 属性。虽然 Link 被渲染为超链接，但在内部实现上使用脚本拦截了浏览器的默认行为，然后调用了history.pushState 方法（注意，文中出现的 history 指的是通过 history 包里面的 create*History 方法创建的对象，window.history 则指定浏览器原生的 history 对象，由于有些 API 相同，不要弄混）。
    属性：to 和 replace 两个属性

// to为string
关于
 
// to为location对象

location = {
  pathname, // 当前路径，即 Link 中的 to 属性
  search, // search
  hash, // hash
  state, // state 对象
  action, // location 类型，在点击 Link 时为 PUSH，浏览器前进后退时为 POP，调用 replaceState 方法时为 REPLACE
  key, // 用于操作 sessionStorage 存取 state 对象
}; 
 
// replace,默认为false,设为true表示替换

五、
    是的一个特定版本，会在匹配上当前的url的时候给已经渲染的元素添加参数，组件的属性有

1. activeClassName(string)：设置选中样式，默认值为active
2. activeStyle(object)：当元素被选中时，为此元素添加样式
3. exact(bool)：为true时，只有当导致和完全匹配class和style才会应用
4. strict(bool)：为true时，在确定为位置是否与当前URL匹配时，将考虑位置pathname后的斜线
5. isActive(func)判断链接是否激活的额外逻辑的功能

// activeClassName选中时样式为selected
FAQs
 
// 选中时样式为activeStyle的样式设置
FAQs

六、——用来将路由与组件挂钩，对应路由显示对应组件

Route 是 React Router中用于配置路由信息的组件，每当有一个组件需要根据 URL 决定是否渲染时，就需要创建一个 Route。

react-router 中的很多特性都与 React 保持了一致，比如它的声明式组件、组件嵌套，当然也包括 React 的状态机特性。

• path——每个Route都需要一个path属性，path属性是一个url，当URL匹配一个Route时，这个Route中定义的组件就会被渲染出来。

• Component渲染方式——component的值是一个组件，当URL和Route匹配时，Component属性定义的组件就会被渲染。

• Render的渲染方式——Render 值是一个函数，这个函数返回一个React元素。这种方式方便地为待渲染的组件传递额外的属性。

{
    return 
6666
}}>
//里面还可以进行路由的嵌套
{
	return (
		

			
			
		
	)
}}>

七、withRouter——包装任何自定义组件，将react-router 的 history,location,match 三个对象传入
        无需一级级传递react-router 的属性，当需要用的router
        属性的时候，将组件包一层withRouter，就可以拿到需要的路由信息

const Mbox=withRouter(Box);
//这时候就能用获取history,location,match 三个对象

八、——Switch组件内部可以是Route或者Redirect，只会渲染第一个匹配的元素

    无标签，则其中的在路径相同的情况下全都会匹配。更严重的是，还会匹配上级路径的，

    属性：location

        Switch可以传递一个location对象，路由匹配将和这个location对象进行比较，而不是url

        Route元素会比较path，Redirect会比较from，如果他们没有对应的属性，那么就直接匹配

 

九、matchPath也是和后端相关的，主要作用就是生成一个match对象

import { matchPath } from 'react-router'
const match = matchPath('/a/123',{
    path: '/a/:id',
    exact: true,
    strict: false
})

第一个参数是pathname

第二个参数是一个对象，里面的属性和route的属性类似，用来和pathname做对比

如果匹配的话，就产生一个match对象，反之，null

十、Prompt

 Prompt是用来提示用户是否要跳转，给用户提示信息默认使用window.confirm，可以结合getUserConfirmation构建自定义提示信息

import { Prompt } from 'react-router'

属性:message，when

 {//函数根据返回值进行跳转处理
        console.log(location);//接受参数对象:例{pathname: "/main/about", search: "", hash: "", state: undefined}
        //写法一
        if(confirm("是否要离开页面？")){
            return true;//表示进行跳转
        }else{
            return false;//表示不进行跳转
        }
        //写法二，效果等同于写法一
        return "是否要离开页面？"
}}/>

十一、Redirect——重定向

 当用户访问某界面时，该界面并不存在，此时用Redirect重定向，重新跳到一个我们自定义的组件里。

  一般放在组件中，属性：

• to:字符串，要重定向的路径／对象，location对象

• push，布尔值，是否将当前路径存到history中（是Link标签的to路径）

• from，用来指定路由的原始值，如果不是给定的字符串，那么不渲染，反之渲染，只能用于switch组件中

    

        
首页
        
关于
        
重定向
    
    

    
        
        
        
        //push为true，重定向一次，history.length+=2,为false,history.length+=1