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、组件

<BrowserRouter>---<Router>的一种，通过使用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元素组件’。

<BrowserRouter basename={'/home'} getUserConfirmation={setConfirmation}>
  <div>
    <Prompt message={'Are you sure to leave'}/>
    <Link to={'/test'}>ceshi</Link>
    <Route path={'/test'} component={Test}/>
  </div>
 </BrowserRouter>

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

basename
getUserConfirmation
hashType:string : 带斜杠，不带斜杠。eg. #/ and #/sunshine/lollipops, # and #sunshine/lollipops
children:reactNode 需要render的‘单个子元素’

<Link>---进入页面路由的链接,最终被渲染成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的底层组件<a></a>，eg. <Link to='/' innerRef={(node)=>{this.refNode=node}} />
others: 可以传入<a> 元素的属性，eg. title, id, className, etc.

<Link to={{
  pathname: `/Detail/${itemFuns.name}`,
  state: {
    name: `${itemFuns.name}`
  },
}}>
  {itemFuns.description}
</Link>

<NavLink>---<Link> 的特殊版本，当匹配当前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

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

message： string，提示的信息。
message : func, 参数为即将跳转的location对象，返回message。
when : bool, true表示阻止跳转，false，接受跳转。

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

initialEntries: array, history stack中保存的locations 数组，locations可以为对象或者url字符串
initialIndex : number, 初始化location在initialEntries中的位置
getUserConfirmation: func, 跳转路由的二次确认函数，与<Prompt>结合使用
keyLength:number, location.key的长度，默认6位
children: node, 单个元素react 组件

<Redirect>---重定向。使用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, 会进行正则匹配。只能用在<Switch>中
exact: bool, 精准匹配
strict: bool, 严格模式，后斜杠将考虑在内

<Route>---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通过这种匹配，从而渲染。注意：如果一个<Route>写在了<Switch>中，<Switch>中的location prop将覆盖<Route>中的location
sensitive: bool, pathname,current url匹配时，大小写是否敏感.

<Router>---所有路由组件的最底层接口。
props

history: object, 路由导航历史记录对象
children: 单个子元素组件

<Switch>---渲染<Route>或<Redirect>中第一个匹配location的组件，且子元素只能为<Route>或<Redirect>。
props

location: object,
children: switch的children组件只能为<Route>或<Redirect>