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对象
查看全文

相关阅读:
.NetMVC过滤器
 Vue-cli配置
 回顾2019年到今天
 八皇后问题
 约瑟夫环问题
 斐波那契函数列
 提高学习效率的方法
 感受爱阅读笔记
 Android IO流汇总
 Android的AsyncTask

原文地址：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