react html to dom,react-router 和react-router-dom

1、区别

react-router:实现了路由的核心功能

react-router-dom:基于react-router，加入了在浏览器运行环境下的一些功能，例如Link组件、BrowserRouter和HashRouter组件。

2、引入

import {Swtich, Route, Router, HashHistory, Link} from 'react-router-dom';

import {Switch, Route, Router} from 'react-router';

import {HashHistory, Link} from 'react-router-dom';

3、组件

---的一种，通过使用HTML5提供的history API(pushState,replaceState,propstate)机制来维持页面UI同RUL的统一。

Props

basename: 该router下路由路径的base url. 应该有一个前置斜杠，但不能有后置斜杠。如果你的页面路由路径为某个子目录，那base url应设置为这个子目录。该页面的其他路由路径即在这个之下。

getUserConfirmation: 路由跳转的二次确认函数，用来拦截Prompt组件, 默认情况下使用window.confirm弹框。

forceRefresh: 布尔值，为true时, router在进行路由跳转的时候会进行页面刷新，可能只在浏览器不支持H5 history api的情况下需要使用。

keyLength: 自定义location.key的长度，默认为6. location.key 或者location.state(废弃)可以用来保存页面滚动条位置。

children: 需要渲染的‘单个reactNode元素组件’。

ceshi

---的一种，通过URL hash部分，如location.hash、 hashChange来保持UI同URL一致。

props

basename

getUserConfirmation

hashType:string : 带斜杠，不带斜杠。eg. #/ and #/sunshine/lollipops, # and #sunshine/lollipops

children:reactNode 需要render的‘单个子元素’

---进入页面路由的链接,最终被渲染成a标签。

props

to: string, 路由链接， 由location的path, search, hash属性拼接而成。

to : object { pathname: 跳转路径，search: 查询参数， hash: url中的hash, eg. #a-hash, state:存储到location中的额外状态数据}

replace: 布尔值- 为true时，将会替换history stack中的当前路径

innerRef: function 允许访问Link的底层组件，eg. {this.refNode=node}} />

others: 可以传入 元素的属性，eg. title, id, className, etc.

pathname: `/Detail/${itemFuns.name}`,

state: {

name: `${itemFuns.name}`

},

}}>

{itemFuns.description}

--- 的特殊版本，当匹配当前URL时，会给当前link添加样式。

props

activeClassName: string, 渲染样式

activeStyle:object, 渲染样式

exact: bool, 为true时，表示精准匹配路由。

strict: bool, 为true时，当进行路由匹配时，后置斜杠将会被考虑在内。

isActive: func, 额外函数来进一步验证当前路由是否匹配。

location: isActive用来比较当前路径是否匹配路由，location用来比较不同的路径。

ariaCurrent : string, link的语义化标识，page| step| location | date| time | true

---当想阻止用户跳转路由，可以使用提示用户是否跳转，与router的getUserConfirmation属性结合使用。

props

message： string， 提示的信息。

message : func, 参数为即将跳转的location对象，返回message。

when : bool, true表示阻止跳转，false，接受跳转。

---一种, 将url history保存在内存中，不可再页面地址栏中读取，通常用于测试或者非浏览器的环境，如react native。

props

initialEntries: array, history stack中保存的locations 数组，locations可以为对象或者url字符串

initialIndex : number, 初始化location在initialEntries中的位置

getUserConfirmation: func, 跳转路由的二次确认函数，与结合使用

keyLength:number, location.key的长度，默认6位

children: node, 单个元素react 组件

---重定向。使用redirect将跳转到一个新的路由，新的location将会覆盖history stack中的当前location。

props

to: string, url地址

to: object, location object, 属性有：pathname: 跳转路径，

search: 查询参数， hash: url中的hash, eg. #a-hash, state:存储到location中的额外状态数据. location中的state可以在redirect跳转组件的this.props.location.state访问

push: 为true表示redirect path将往history stack中推一条新数据而不是替换

from: redirect from url, 会进行正则匹配。只能用在中

exact: bool, 精准匹配

strict: bool, 严格模式，后斜杠将考虑在内

---React router中最重要的模块，主要职责是当location匹配路由时，会将UI render出来。

props

component: 当传递component渲染UI时，router将会用React.createElement来将组件封装成一个新的React element, 当传递一个inline func, react每次render都会unmount, mount一个新的组件，会消耗性能，此时可以使用render/children prop

render: func, inline func不会有上述性能问题，参数同route props相同

children: func, 有时，无论location是否匹配路由，你都想render某个UI，此时可以使用children prop ,等同于render。 函数参数同route props

component, render优先级高于children，所以不要一次使用一种以上的渲染方式

path: string | string[], 一个url字符串，或者一组url 字符串，会进行正则匹配，如果path为空，那么会认为匹配

exact: bool, 为true, 要精准匹配，path同location.pathname完全一致

strict: bool, 为true, path的后置斜杠将在进行匹配时被考虑在内。

location: object, route path每次都会与当前浏览器的url进行匹配，来确定是否渲染，但是location可以使一个不匹配的pathname通过这种匹配，从而渲染。注意：如果一个写在了中，中的location prop将覆盖中的location

sensitive: bool, pathname,current url匹配时，大小写是否敏感.

---所有路由组件的最底层接口。

props

history: object, 路由导航历史记录对象

children: 单个子元素组件

---渲染或中第一个匹配location的组件，且子元素只能为或。

props

location: object,

children: switch的children组件只能为或