React-Router
（5.2.0）
效果
router类型组件
BrowerRouter
- 使用HTML5的historyApi(pushState,replaceState,监听popstate事件)来保存页面和路由同步
- 属性
。basename:string, 路由的起点path,以 ‘/’开头，但是不能以‘/’结尾
。getUserConfirmation: func, 用来确认是否进行路由切换，需要和 组件一起使用才会生效
。forceRefresh: bool， 是否进行整页刷新，如果为true,切换路由就会刷新页面
。keyLength: number， location key的长度，默认为6
。children:node, 子组件
HashRouter
- 使用浏览器自带的 #(sharp)后面的值，具有天生改变不会刷新浏览器，使用 hashchange进行监听
- 属性
。basename:string, 路由起点path,以‘/’开头，但是不能以‘/’结尾
。getUserConfirmation: func， 用来确认是否进行路由切换，需要和 组件一起使用才会生效
- 子主题 1
。hashType: string，使用window.loction.hash的编码类型,默认是 ‘slash’编码
- “slash” 创建 #/ 和 #/sunshine/lollipops 的hash值。例如：右图
- slash
- “noslash” 创建 # 或者#sunshine/lollipops 的hash值
- noslash
- “hashbang” 创建 #!/ 或者#!/sunshine/lollipops 的hash值
- hashbang
MemoryRouter
- 在内存中保留历史记录，不会反应到地址栏上。一般使用在测试环境或者非浏览器环境，例如： react-Native
- 属性
。initialEntries: array 一个保存在history栈中的对象数组，对象包含pathname,state,hash,search或者是一个完成的url地址
。initialIndex: number ， 在 initialEntries 数组中初始化的索引
。getUserConfirmation: func 与上面一样
。keyLength: number 与上面一样
。children: node 子节点
StaticRouter
- 服务端渲染的静态路由
- 属性
。basename: string 和 history一样
。location: string|object, 服务器接收的url或者是一个包含{ pathname, search, hash, state}的对象
。context: object， 服务端渲染上下文对象
。children: node 子节点
NativeRouter
- react给安卓或者ios提供的路由
- 属性
。getUserConfirmation: func 同上
。keyLength: number 同上
。children: node
导航链接组件
Link
- 就是a链接，底层把a链接的默认事件阻止，换成路由的history.push()方法
- 属性
。to : string| object|function,
一个地址pathname部分的字符串可以传递‘search, hash,state’等参数;
或者是一个包含{pathname,search, hash,state}的对象;
或者是一个返回上面字符串或者对象的函数
- 字符串
- 对象
- 函数
。replace: bool, 当为true的时候，就会启动改变路由时替换当前路由，不会保留历史记录
。innerRef: function|RefObject react 16版本后可以不需要使用，实质上就是forwardRef
。component: React.Component ,如果需要使用自己的导航组件，通过改属性传递
。others 其他 a元素已有的属性，例如： id, class, 和 style等
NavLink
- 继承Link组件，区别是，比link多带了一个显示的样式
- 属性，除了上面Link属性外，还拥有
。activeClassName: string 当前路由显示的NavLink的类名
。activeStyle: object 当前路由显示的NavLink的内联样式
。exact: bool 路由是否启动精确匹配
。strict: bool 路由匹配算法严格模式，是否匹配路由最后意味的’‘/”
。isActive: func 添加额外的匹配规则，此函数返回true添加对应的样式
- 子主题 1
。location: object 在上面isActive函数的location对象，该对象是url的信息
。aria-current: string 对于当前激活的链接，添加额外的属性，默认是“page”
- 其他属性
Redirect
- 重定向组件，与from属性匹配时候，可以自动跳转到该组件，跳转到组件覆盖当前的history栈的位置
- 属性
。from: string route来自哪里，url中的pathname字符串，里面parameter参数会传递给 to 属性，其他参数会被忽视
。to: string|object
重定向的url pathname字符串；
包含{pathname，state,search}的对象
- 字符串
- 对象
。push:bool 是否启动route的push模式，默认是false
。exact: bool 是否启动路由精确匹配，默认false
。strict: bool 是否启动匹配最后一个’/‘模式，默认false
。sensitive: bool 是否启动区分路由的大小写模式，默认false
Hooks
useLocation
- 用于获取地址栏上的信息
- 案例
- 返回结果
。pathname: Pathname;
- 当前url的路径名称
。search: Search;
。当前url？和&的参数，会转成一个对象
。state: S;
- 路由跳转传递的其他参数，e.g. push(path, state)
hash: Hash;
- 路由传递的hash参数
。key?: LocationKey;
- 选传，的一个当前history栈中的key
useHistory
- 用于获取当前history模式的路由全部信息，包括一些常用的方法
- 案例
- 返回结果分析
。属性
- length - (number)
- 当前history栈的长度
- action - (string)
- 当前路由的行为，分为3种
- PUSH
- REPLACE
- POP
- location - (object)
- 上面的useLocation的对象信息
。方法
- push(path, [state]) - (function)
- 向history栈种添加一个新的对象
- replace(path, [state]) - (function)
- 把当前history栈种的路由信息替换
- go(n) - (function)
- history栈种当前的指针移动数量，可以正式，负数和0
- goBack() - (function)
- 路由指针向下移动，相当于go(-1)
- goForward() - (function)
- 路由指针向上移动，相当于go(1)
- block(prompt) - (function)
- 当前路由离开之前做的个性化操作，类似于getUserConfirmation() 函数
useParams
- 获取/:a/:b 地址栏上的参数结果
- 案例
。地址栏参数
。结果
- 结果分析
。一个地址栏参数解析的对象
useRouteMatch
- 获取/:a/:b 地址栏上的参数对象
- 案例
。地址栏参数
。结果
- 返回结果分析
。params: Params;
- 解析后的参数对象，和useParams是一样的
。isExact: boolean;
- 当前路径和path的结果是否精确匹配
path: string;
- Route组件中定义的Path
。url: string;
- 当前地址栏上的pathname
路由匹配组件
Route
- 路由映射页面的最基本的组件
- 匹配渲染组件的优先级顺序，children > component > render
。children
- children: func,返回一个reactElement，可以嵌套多层Route组件
。component
。render: func
- 返回一个reactElement
- 传递给子组件的props
。location
- 与useLocation 获取的对象结果一样
。match
- 与useRouteMatch获取的结果一样
。history
- 与useHistory获取的结果一样
。path: string | string[]
- 路由地址，可以是字符串或者字符串数组
。exact: bool
- 精确匹配
。strict: bool
- 严格模式
。sensitive: bool
- 区分大小写
Switch
- 开关组件，是否匹配到一个组件后就不再往下匹配，用来包裹Route或者Redirect组件
- 属性
。location
- 与route的location一样
。children
- 子组件，必须是Route或者Redirect包裹的组件
