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组件只能为或