Ŀ¼

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对象

来源：博客园

作者：CodingSherlock

链接：https://www.cnblogs.com/goOtter/p/11413866.html

标签

string

history

match

react

React Router API

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