react-router常用api文档及路由设计模式

react-router作为强大的前端路由控件，地位突出，不过在使用过程中还是需要进行一些额外的封装，以便达到可以配置路由的目的。而要想灵活的封装路由配置模式，就需要很好的掌握react-routerApi。接下来探讨一下路由的深度封装。

首先看下react-router库：4.0是多包管理

react-router React Router 核心

react-router-dom 用于 DOM 绑定的 React Router（一般引用这一个即可）

react-router-native 用于 React Native 的 React Router

react-router-redux React Router 和 Redux 的集成

react-router-config 静态路由配置帮助助手
——————————————————————————————————————————————————

常用api

react-router路由模式表

BrowserRouter	HashRouter	MemoryRouter	NativeRouter	StaticRouter
使用 HTML5 提供的 history API 来保持 UI 和 URL 的同步	使用 URL 的 hash (例如：window.location.hash) 来保持 UI 和 URL 的同步	能在内存保存你 “URL” 的历史纪录(并没有对地址栏读写)	为使用React Native提供路由支持	从不会改变地址

三种常用模式：

1，BrowserRouter  原理：html5 history对象的 pushState replaceState popstate

basename: string	getUserConfirmation: func	forceRefresh: bool	keyLength: number	children: node
所有locations的基本URL	用于确认导航的功能	路由更新时，页面是否整个刷新	location.key的长度	要呈现的单个子元素

 

2, HashRouter 原理：使用URL的哈希部分切换路由

注： Hash history不支持location.key或location.state

basename: string	getUserConfirmation: func	hashType: string	children: node
所有locations的基本URL	用于确认导航的功能	window.location.hash的编码类型	要呈现的单个子元素

注：hashType: string取值：

"slash": 创建一个hash值（默认），例如：#/ and #/sunshine/lollipops
"noslash": 创建一个hash值，例如：# and #sunshine/lollipops
”hashbang“: 创建一个”ajax crawlable” (已被谷歌弃用) 例如：#!/ and #!/sunshine/lollipops

3，MemoryRouter 原理：将“URL”的历史记录保存在内存中（不读取或写入地址栏）的<路由器>

应用场景：在测试和非浏览器环境（如React Native）中很有用

import { MemoryRouter } from 'react-router'

<MemoryRouter>
<App/>
</MemoryRouter>

另外还有：NativeRouter：为使用React Native提供路由支持

                   StaticRouter：从不会改变地址

——————————————————————————————————————————————————

——————————————————————————————————————————————————

主要组件介绍

链接跳转Link

To  字符创；对象

replace:是否替换url.如果为true，单击链接将替换历史堆栈中的当前条目，而不是添加新条目。

<NavLink>特殊的Link

import { NavLink } from 'react-router-dom'
<NavLink
to="/faq" activeClassName="selected"
>FAQs</NavLink>

activeClassName: string	activeStyle: object	exact: bool	strict: bool	isActive: func	location: object
当活动时给出元素的类	元素处于活动状态时 应用于元素的样式	当为true时，仅当位置匹配完全时 才会应用活动类/样式	当为真时， 在确定位置是否与当前网址匹配时， 将考虑位置路径名上的尾部斜线。	增加用于确定链接是否活动的额外逻辑的功能	isActive比较当前的历史位置

—————————————————————————————————————————————————————

<Router> 作用：用来保持与 location 的同步

1，在 React Router 4 中，你可以将各种组件及标签放进 <Router>组件中

2，<Router>组件下只允许存在一个子元素，如存在多个则会报错

——————————————————————————————————————————————————————

<Route>  作用：Route组件主要的作用就是当一个location匹配路由的path时，渲染某些UI
 

属性表

path（string）	exact（bool）	strict（bool）（是否匹配斜线）
路由匹配路径。（没有path属性的Route 总是会 匹配）；	为true时，则要求路径与location.pathname必须完全匹配	true的时候，有结尾斜线的路径只能匹配有斜线的location.pathname

——————————————————————————————————————————————————————

三种渲染内容的方法 （重点掌握，核心）

<Route component>	<Route render>	Route children
在地址匹配的时候React的组件才会被渲染，route props也会随着一起被渲染	这种方式对于内联渲染和包装组件， 却不引起意料之外的重新挂载特别方便	与render属性的工作方式基本一样，除了它是不管地址匹配与否都会被调用

注意事项：<Route component>的优先级要比<Route render>高

使用实例：

<Router>
    <Route exact path="/" component={Home}/> //component方式
    <Route path="/home" render={() => <div>Home</div>}/> // 行内渲染
</Router>

使用行内渲染包装组合

//例子：封装一个EncapRoute组件 组件接收参数：component
//组件内部使用内联渲染，像component传入额外的props参数
const EncapRoute = ({component:Component, ...rest}) => (
    <Route
      {...rest} 
      render = { 
        (props) => {
          return <Component {...props}></Component>
        }
      }
    />
  )
/**使用EncapRoute组件**/
<EncapRoute path="/cool" component={Something}/>

—————————————————————————————————————————————————————

<Switch>  作用：只匹配一个路由 匹配不到时 匹配 redirect

 

参考：https://www.jianshu.com/p/6a45e2dfc9d9

        https://www.jianshu.com/p/53820bb5ee78