React Router API

zoukankan html css js c++ java

React Router API
目录
API
BrowserRouter
basename: string
getUserConfirmation: func
forceRefresh: bool
keyLength: number
children: node
HashRouter
basename: string | getUserConfirmation: func | children: node
hashType: string
Link
to:string | object | function
replace:bool
innerRef: function | RefObject
others
NavLink
activeClassName:string
activeStyle:object
exact:bool
strict:bool
isActive:func
location:object
aria-current:string
Prompt
message:string | func
when: bool
MemoryRouter
initialEntries: array
initialIndex: number
getUserConfirmation: func | keyLength: number | children: node
Redirect
to:string | object
push: bool
from: string
exact:bool
strict:bool
sensitive:bool
Route
component
render:func
children:func
path:string | string[]
exact:bool
strict:bool
sensitive:bool
location:object
Router
history:object
children:node
StaticRouter
basename: string
location: string | object
context: object
children: node
Switch
location: object
children: node
history
history is mutable
location
match
null match
matchPath
withRouter
API

BrowserRouter

底层调用H5的history api

basename: string

所有路由的基本url。设置时只需要前导斜杠，不需要尾部斜杠
```
<BrowserRouter basename="/calendar" />
<Link to="/today"/> // renders <a href="/calendar/today">
```
getUserConfirmation: func

默认调用 window.confirm显示一个模态对话框

forceRefresh: bool

是否在路由跳转时强制刷新页面，可能只需要在不支持H5 history 的前提下使用这个属性

keyLength: number

location.key的长度，默认为6

children: node

需要渲染的子元素

HashRouter

调用hash api

注意：无法使用location.key 或者 location.state属性

basename: string | getUserConfirmation: func | children: node

同BrowserRouter

hashType: string

Link

为应用提供可声明，可访问性的导航

to:string | object | function

字符串形式
```
<Link to="/courses?sort=name" />
```
对象形式
- pathname: A string representing the path to link to.
- search: A string representation of query parameters.
- hash: A hash to put in the URL, e.g. #a-hash.
- state: State to persist to the location.
```
<Link
  to={{
    pathname: "/courses",
    search: "?sort=name",
    hash: "#the-hash",
    state: { fromDashboard: true }
  }}
/>
```
函数形式

参数为当前location，返回值为对象或字符串
```
<Link to={location => ({ ...location, pathname: "/courses" })} />
<Link to={location => `${location.pathname}?sort=name`} />
```
replace:bool

替换history stack 而不是添加一个
```
<Link to="/courses" replace />
```
innerRef: function | RefObject

使用React.createRef（）获取组件的底层引用

others

自定义其他属性，例如title，id，className

NavLink

Link的特殊版本，它将在与当前URL匹配时为渲染元素添加样式属性。

activeClassName:string

激活时命中的样式，默认为样式名为active，该属性会与className属性提供的样式合并

activeStyle:object
```
<NavLink
  to="/faq"
  activeStyle={{
    fontWeight: "bold",
    color: "red"
  }}
>
  FAQs
</NavLink>
```
exact:bool

是否默认选中

strict:bool

在命中路由时是否考虑尾部斜杠

isActive:func

激活时调用的函数，包含match和location两个参数
```
// 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
}

<NavLink
  to="/events/123"
  isActive={oddEvent}
>Event 123</NavLink>
```
location:object

当前的历史记录位置。要比较不同的location，可以将当前location作为参数传入

aria-current:string

语义化

Prompt

用于在离开当前导航时提示用户

message:string | func
```
<Prompt
  message={location =>
    location.pathname.startsWith("/app")
      ? true
      : `Are you sure you want to go to ${location.pathname}?`
  }
/>
```
when: bool

控制prompt的渲染时机
```
<Prompt when={formIsHalfFilledOut} message="Are you sure?" />
```
MemoryRouter

将用户的访问记录存储在内存中。适合于测试或无浏览器环境如react native

initialEntries: array

初始化一个location对象的集合。location可以是一个包含{pathname，search，hash，state}中任意属性的对象或字符串
```
<MemoryRouter
  initialEntries={["/one", "/two", { pathname: "/three" }]}
  initialIndex={1}
>
  <App />
</MemoryRouter>
```
initialIndex: number

指定初始化initialEntries的下标

getUserConfirmation: func | keyLength: number | children: node

类似BrowerRouter

Redirect

在history stack中，redirect-to 的 location 将会替换当前的 location

to:string | object
```
<Redirect
  to={{
    pathname: "/login",
    search: "?utm=your+face",
    state: { referrer: currentLocation }
  }}
/>
```
state 参数可以在redirected-to 组件的this.props.location.state中访问到

push: bool

如果设置为true，将不会替换history stack中的location

from: string

exact:bool

strict:bool

sensitive:bool

是否大小写敏感

Route

当location命中时，去渲染对应的组件

component
```
<Route path="/user/:username" component={User} />;

// All route props (match, location and history) are available to User
function User(props) {
  return <h1>Hello {props.match.params.username}!</h1>;
}

function User({match, location, history}){};
```
底层调用React.createElement去创建一个新的React element

render:func

函数同样可以访问match, location和history三个参数
```
// convenient inline rendering
<Route path="/home" render={() => <div>Home</div>}/>

// wrapping/composing
// You can spread routeProps to make them available to your rendered Component
const FadingRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={routeProps => (
    <FadeIn>
      <Component {...routeProps}/>
    </FadeIn>
  )}/>
)

<FadingRoute path="/cool" component={Something}/>
```
注意：component的优先级高于render

children:func

它工作的方式同render一样，区别在于不管有没有命中路由，他都将被渲染

children 接受的参数与component和render相同，当路由没有命中的时候，match为null
```
<Route children={({ match, ...rest }) => (
  {/* Animate will always render, so you can use lifecycles
      to animate its child in and out */}
  <Animate>
    {match && <Something {...rest}/>}
  </Animate>
)}/>
```
注意：component和render的优先级高于children, 应当只使用其中的一个元素

path:string | string[]
```
<Route path="/users/:id" component={User} />
<Route path={["/users/:id", "/profile/:id"]} component={User} />
```
exact:bool

strict:bool

具有尾部斜杠的路径将仅匹配具有尾部斜杠的location.pathname。当location.pathname中有其他URL段时，这不起作用。

path location.pathname matches?

/one/ /one no

/one/ /one/ yes

/one/ /one/two yes

sensitive:bool

path location.pathname sensitive matches?

/one /one true yes

/One /one true no

/One /one false yes

location:object

Router

所有路由器组件的通用低级接口

history:object

children:node

StaticRouter

永远不会改变location的Router

basename: string

location: string | object

context: object

在渲染期间，组件可以向对象添加属性以存储有关渲染的信息。

当<Route>匹配时，它会将context渲染为staticContext prop传递给命中的组件

渲染后，context中的属性可用于配置服务器的响应。

children: node

Switch

渲染第一个匹配的Route或Redirect

Switch与一组Route的区别在于，它仅仅渲染第一个匹配的路由

location: object

children: node

Switch只能包含Route和Redirect元素，Route匹配path元素，Redirect匹配from元素，仅匹配其中一个元素

history

React Router的两个主要依赖项之一https://github.com/ReactTraining/history

history is mutable

因为history是不可变的。因此建议从Router的渲染props来访问location而不是通过history.location来访问

location

location代表应用程序现在的位置，您希望它去的位置，甚至是当前的位置。看起来像这样：
```
{
  key: 'ac3df4', // not with HashHistory!
  pathname: '/somewhere'
  search: '?some=search-string',
  hash: '#howdy',
  state: {
    [userDefined]: true
  }
}
```
你可以通过这些方式访问location:
- Route component as this.props.location
- Route render as ({ location }) => ()
- Route children as ({ location }) => ()
- withRouter as this.props.location
history.location同样也可访问到location，但最好不要这样做，因为history是不可变的

location对象是never mutated，所以当导航改变的时候，你可以在组件的生命周期钩子中访问它，以决定是否进行动画渲染或获取数据等操作

最后，你可以通过把location传递给：
- Route
- Switch
这将阻止他们使用路由器状态中的实际位置。这对于动画和待定导航很有用，或者您想要将组件欺骗渲染到与真实位置不同的位置时

match

match对象包含如下属性:
- params - (object) Key/value pairs parsed from the URL corresponding to the dynamic segments of the path
- isExact - (boolean) true if the entire URL was matched (no trailing characters)
- path - (string) The path pattern used to match. Useful for building nested <Route>s
- url - (string) The matched portion of the URL. Useful for building nested <Link>s
你可以通过如下方式去访问它：
- Route component as this.props.match
- Route render as ({ match }) => ()
- Route children as ({ match }) => ()
- withRouter as this.props.match
- matchPath as the return value
null match

注意：当你在Route上使用children属性渲染，并试图访问match.url属性时，可能会出现一个TypeError错误

matchPath

这使您可以使用Route使用的相同匹配代码，但你可以在正常渲染周期之外使用它

第一个参数pathname，你需要命中的路由。

第二个参数为一个对象，他们与Route接受的匹配props相同
```
{
  path, // like /users/:id; either a single string or an array of strings
  strict, // optional, defaults to false
  exact, // optional, defaults to false
}
```
返回值，当匹配成功时返回一个object，当匹配失败时返回null

withRouter

您可以通过withRouter高阶组件访问history的属性和最近的Route的match对象
查看全文

相关阅读:
HDU 2433 Travel （最短路，BFS，变形）
HDU 2544 最短路（最短路，spfa）
HDU 2063 过山车（最大匹配，匈牙利算法）
HDU 1150 Machine Schedule (最小覆盖，匈牙利算法)
290 Word Pattern 单词模式
 289 Game of Life 生命的游戏
 287 Find the Duplicate Number 寻找重复数
 283 Move Zeroes 移动零
 282 Expression Add Operators 给表达式添加运算符
 279 Perfect Squares 完美平方数

原文地址：https://www.cnblogs.com/goOtter/p/11413866.html

path	location.pathname	sensitive	matches?
`/one`	`/one`	`true`	yes
`/One`	`/one`	`true`	no
`/One`	`/one`	`false`	yes

API

BrowserRouter

basename: string

getUserConfirmation: func

forceRefresh: bool

keyLength: number

children: node

HashRouter

basename: string | getUserConfirmation: func | children: node

Link

to:string | object | function

replace:bool

others

NavLink

activeClassName:string

activeStyle:object

exact:bool

strict:bool

isActive:func

location:object

Prompt

message:string | func

when: bool

getUserConfirmation: func | keyLength: number | children: node

Redirect

to:string | object

push: bool

from: string

exact:bool

strict:bool

sensitive:bool

Route

component

render:func

path:string | string[]

exact:bool

strict:bool

sensitive:bool

children:node

StaticRouter

Switch

history is mutable

matchPath