React Router Dom API 中文 文档

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

Props

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

 // renders 

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

         

          
         ceshi
         
         
 

forceRefresh: 布尔值，为true时, router在进行路由跳转的时候会进行页面刷新，可能只在浏览器不支持H5 history api的情况下需要使用。
keyLength: 自定义location.key的长度，默认为6. location.key 或者location.state(废弃)可以用来保存页面滚动条位置。
children: 需要渲染的‘单个reactNode元素组件’

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

注意事项：
Hash History不支持location.key 或 location.state. hashRouter一般用于低版本浏览器，在较高版本浏览器中推荐配置服务器端使用browserHistory

props

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

进入页面路由的链接
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.

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

activeClassName: string, 渲染样式
activeStyle:object, 渲染样式
exact: bool, 为true时，表示精准匹配路由。
strict: bool, 为true时，当进行路由匹配时，后置斜杠将会被考虑在内。
isActive: func, 额外函数来进一步验证当前路由是否匹配。eg.

// only consider an event active if its event id is an odd number
const oddEvent = (match, location) => {
  if (!match) {
    return false
  }
  const eventID = parseInt(match.params.eventID)
  return !isNaN(eventID) && eventID % 2 === 1
}

Event 123

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出来。

Route render methods

3. 
   以上适用于不同的环境，每次只能用其中一种方法，component是最常用的

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匹配时，大小写是否敏感.

所有路由组件的最底层接口, 通常，将用以下某种高阶路由：

使用低阶 的最常见用例是同步一个自定义历史记录与一个状态管理库，比如 Redux 或 Mobx。请注意，将 React Router 和状态管理库一起使用并不是必需的，它仅用于深度集成。

props

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

静态路由，页面的location 将不会改变。一般用于服务器端。
props

basename: 所有location的base url，有前置斜杠无后置斜杠
location: string
location: object
context: object, 渲染中，组件会添加属性到context上保存某些信息
children: 单元素组件

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

location: object,
children: switch的children组件只能为或