React-Router4.x中文文档

近期困扰于SPA在ios微信调用分享SDK失败的问题, 目前采用拿掉react-router路由,采用原始location.href的方式跳转,临时解决问题...

坑终究是坑,不填不足以平民愤...

这时候才发现react-router的升级至4.x,相比之前,多有不同之处,废话不多说,先搞个API整体的摸索一番。

 对以上问题感兴趣的,欢迎交流 ^_^ 

 

重点分割线

 


 

 

具体栗子参见:https://github.com/git-zhangsan/react-router4#readme(持续更新中)

 

以下为翻译的中文API(水平有限,凑合看,欢迎纠正补充~)

 

使用HTML5历史记录API(pushState,replaceState和popstate事件)的来保持您的UI与URL同步。

Code:

`

import { BrowserRouter } from 'react-router-dom'

<BrowserRouter
basename={optionalString}
forceRefresh={optionalBool}
getUserConfirmation={optionalFunc}
keyLength={optionalNumber}
>

 

`

属性:

- basename: string

所有locations的基本URL。如果应用程序从服务器上的子目录提供,则需要将其设置为子目录。正确格式的基础名称应该有一个主要的斜杠,但没有尾部斜线。

`


 // renders 

 

`

- getUserConfirmation: func

用于确认导航的功能。默认使用window.confirm。

`

// this is the default behavior
const getConfirmation = (message, callback) => {
const allowTransition = window.confirm(message)
callback(allowTransition)
}

 

`

- forceRefresh: bool

如果为true,则路由器将在页面导航中使用全页刷新。您可能只想在不支持HTML5历史记录API的浏览器中使用此功能。

`

const supportsHistory = 'pushState' in window.history

 

`

- keyLength: number

location.key的长度。默认为6。

`

 

`

- children: node

要呈现的单个子元素。

 

使用URL的哈希部分(即window.location.hash)的来保持您的UI与URL同步。

重要的提示:Hash history不支持location.key或location.state。在以前的版本中,我们试图减少行为,但是有一些边缘案例我们无法解决。
任何需要此行为的代码或插件将无法正常工作。由于此技术仅用于支持旧版浏览器,因此我们建议您将服务器配置为使用

`

import { HashRouter } from 'react-router-dom'



`

- basename: string

所有locations的基本URL。正确格式的基础名称应该有一个主要的斜杠,但没有尾部斜线。

`

`

- getUserConfirmation: func

用于确认导航的功能。默认使用window.confirm。

`

// this is the default behavior
const getConfirmation = (message, callback) => {
const allowTransition = window.confirm(message)
callback(allowTransition)
}

`

- hashType: string

用于window.location.hash的编码类型。可用值为:

"slash": 创建一个hash值,例如:#/ and #/sunshine/lollipops
"noslash": 创建一个hash值,例如:# and #sunshine/lollipops
”hashbang“: 创建一个”ajax crawlable” (已被谷歌弃用) 例如:#!/ and #!/sunshine/lollipops

默认值"slash"

- children: node
要呈现的单个子元素。

 

在应用程序范围提供声明性,可访问的导航

`

import { Link } from 'react-router-dom'

About

 

`

- to: string

链接到的路径名或位置。

`

`

- to: object

要链接的位置。

`

{{
pathname: '/courses',
search: '?sort=name',
hash: '#the-hash',
state: { fromDashboard: true }
}}/>


`

- replace: bool

如果为true,单击链接将替换历史堆栈中的当前条目,而不是添加新条目。

`

`

一种特殊版本的,当与当前URL匹配时,将向渲染元素添加样式属性。

`

import { NavLink } from 'react-router-dom'

About

 

`

- activeClassName: string

当活动时给出元素的类。默认给定类是活动的。这将与className支持相结合。

`

<NavLink
to="/faq"
activeClassName="selected"
>FAQs

`

- activeStyle: object

当元素处于活动状态时应用于元素的样式。

`

<NavLink
to="/faq"
activeStyle={{
fontWeight: 'bold',
color: 'red'
}}
>FAQs


`

- exact: bool

当为true时,仅当位置匹配完全时才会应用活动类/样式。

`

<NavLink
exact
to="/profile"
>Profile

`

- strict: bool

当为真时,在确定位置是否与当前网址匹配时,将考虑位置路径名上的尾部斜线。
有关详细信息,请参阅文档。(https://reacttraining.com/core/api/Route/strict-bool)

`

<NavLink
strict
to="/events/"
>Events

`

- isActive: func

增加用于确定链接是否活动的额外逻辑的功能。如果您想要更多地验证链接的路径名与当前URL的路径名匹配,则应该使用这一点。

`

// 只有当事件ID为奇数时,才考虑事件有效
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

`

- location: object

isActive比较当前的历史位置(通常是当前的浏览器URL)。要与其他位置进行比较,可以传递一个位置。


https://reacttraining.com/core/api/Prompt


将“URL”的历史记录保存在内存中(不读取或写入地址栏)的<路由器>。在测试和非浏览器环境(如React Native)中很有用

`

import { MemoryRouter } from 'react-router'



`

- initialEntries: array

历史堆栈中的一系列位置。这些可能是具有{pathname,search,hash,state}或简单字符串URL的完整的位置对象。

`

<MemoryRouter
initialEntries={[ '/one', '/two', { pathname: '/three' } ]}
initialIndex={1}
>

`

- initialIndex: number

initialEntries数组中的初始位置索引。

- getUserConfirmation: func

用于确认导航的功能。当使用直接使用时,必须使用此选项。

- keyLength: number

location.key的长度。默认为6

`

`

- children: node

要呈现的单个子元素。

 

渲染将导航到新位置。新位置将覆盖历史堆栈中的当前位置,如服务器端重定向(HTTP 3xx)。

`

import { Route, Redirect } from 'react-router'

 (
loggedIn ? (

) : (

)
)}/>

`

- to: string

要重定向到的网址。

`

`

- to: object

要重定向到的位置。

`

{{
pathname: '/login',
search: '?utm=your+face',
state: { referrer: currentLocation }
}}/>

`

- push: bool

当为true时,重定向会将新条目推入历史记录,而不是替换当前条目。

`

`

- from: string

要重定向的路径名。这只能用于在内部呈现时匹配位置。
有关详细信息,请参阅。https://reacttraining.com/web/api/Switch/children-node


`





`


路由组件可能是React Router中了解和学习使用的最重要的组件。其最基本的责任是在位置与路线的路径匹配时呈现一些UI。

`

import { BrowserRouter as Router, Route } from 'react-router-dom'


 

`


Route render methods

有3种方法可以使用呈现某些东西:

**
**
**

每个在不同的情况下都有用。您只能在给定的上使用这些方法之一。请看下面的解释,了解为什么你有3个选项。大多数时候你会使用component。

Route props

所有三个渲染方法将通过相同的三个route props

** match
** location
** history

- component

仅当位置匹配时才呈现的React组件.它将与route props一起呈现。

当您使用组件(而不是下面的渲染或子项)时,路由器使用React.createElement从给定组件创建一个新的React元素。
这意味着如果您向组件属性提供内联函数,则可以在每个渲染中创建一个新组件.这将导致现有组件卸载和新组件安装,而不是仅更新现有组件
当使用内联函数进行内联渲染时,请使用render或child(下文)

`



const User = ({ match }) => {
return 

Hello {match.params.username}!

}

`


- render: func

这允许方便的在线呈现和包装,而不需要上述的不期望的重新安装。您可以使用组件支持为您创建一个新的React元素,而不必在位置匹配时传入要调用的函数。
渲染道具接收与组件渲染道具相同的所有route props。

警告:取决于,所以不要在同一个中使用两者

`

// 内联呈现
 
Home
}/> // 包装/合成 const FadingRoute = ({ component: Component, ...rest }) => ( ( )}/> )

`

- children: func

有时您需要渲染路径是否匹配该位置。在这些情况下,可以使用函数child prop。它的工作原理就像渲染,除了它被调用是否有匹配
children 渲染prop接收与组件和渲染方法相同的所有route props,除非路由未能匹配URL,则match为null。
这允许您根据路线是否匹配来动态调整用户界面。在这里,如果路由匹配,我们添加一个活动类

警告:优先级高于,所以不要在同一个中使用多个

`

const ListItemLink = ({ to, ...rest }) => ( (
  • )}/> ) //可以用于动画 ( {/* Animate will always render, so you can use lifecycles to animate its child in and out */} {match && } )}/>

     

    `

    - path: string

    path-to-regexp理解的任何有效的URL路径。

    `

    `

    - exact: bool

    当为true时,仅当路径与location.pathname完全匹配时才匹配。

    `

    `

    ______________________________________________
    | path | location.pathname | exact | matches? |

    | /one | /one/two             | true   | no            |

    | /one | /one/two             | false  | yes           |
    ----------------------------------------------

    - strict: bool

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

     

    ________________________________________
    | path | location.pathname | matches? |

    | /one/ | /one                  | no           |

    | /one/ | /one/                | yes          |

    | /one/ | /one/two           | yes          |
    ----------------------------------------


    警告:strict可以用来强制执行location.pathname没有尾部斜杠,但为了做到这一点,strict和exact必须是true。

    `

    `

    ________________________________________
    | path | location.pathname | matches? |

    | /one | /one                   | yes |

    | /one | /one/                 | no |

    | /one | /one/two            | no |
    ----------------------------------------

    - location: object

    元素尝试将其路径与当前历史记录位置(通常是当前浏览器URL)进行匹配。但是,也可以传递具有不同路径名的位置进行匹配。
    https://reacttraining.com/react-router/location.md

    当您需要将匹配到当前历史记录位置以外的位置时,这是非常有用的,如“动画转换”示例所示。
    https://reacttraining.com/react-router/web/example/animated-transitions

    如果元素包裹在中并匹配传递给(或当前历史位置)的位置,则传递给的位置prop将被<开关>(在此给出)
    https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Switch.js#L51


    所有路由器组件的通用低级接口。通常,应用程序将使用其中一个高级路由器:

    **
    **
    **
    **
    **

    使用低级“路由器”最常见的用例是将自定义历史记录与状态管理库(如Redux或Mobx)进行同步。请注意,这不是与React Router一起使用状态管理库,而只用于深度集成。

    `

    import { Router } from 'react-router'
    import createBrowserHistory from 'history/createBrowserHistory'
    
    const history = createBrowserHistory()
    
    
    
    

     

    `

    - history: object

    用于导航的历史对象。

    `

    import createBrowserHistory from 'history/createBrowserHistory'
    
    const customHistory = createBrowserHistory()
    

    `

    - children: node

    要呈现的单个子元素。

    `

    
    
    


    `


    一个从不改变位置的

    当用户实际上没有点击时,这在服务器端渲染场景中很有用,因此该位置从未实际改变。因此,名称:static。当您只需插入一个位置并在渲染输出上作出断言时,它也可用于简单的测试。

    以下是一个示例节点服务器,为发送302状态代码,并为其他请求发送常规HTML

    `

    import { createServer } from 'http'
    import React from 'react'
    import ReactDOMServer from 'react-dom/server'
    import { StaticRouter } from 'react-router'
    
    createServer((req, res) => {
    
    // This context object contains the results of the render
    const context = {}
    
    const html = ReactDOMServer.renderToString(
    
    
    
    )
    
    // context.url will contain the URL to redirect to if a  was used
    if (context.url) {
    res.writeHead(302, {
    Location: context.url
    })
    res.end()
    } else {
    res.write(html)
    res.end()
    }
    }).listen(3000)

     

    `

    - basename: string

    所有位置的基本URL。正确格式化的基础名称应该有一个主要的斜杠,但没有尾部斜线

    `

    `

    - location: string

    服务器接收到的URL,可能是节点服务器上的req.url。

    `

    
    
    

    `

    - location: object

    一个像{pathname,search,hash,state}的位置对象

    `

    
    
    

    `

    - context: object

    一个简单的JavaScript对象。在渲染过程中,组件可以向对象添加属性以存储有关渲染的信息。

    `

    const context = {}
    
    
    

    `

    匹配时,它会将context对象传递给它作为staticContext prop所呈现的组件。查看“服务器渲染”指南,
    https://reacttraining.com/web/guides/server-rendering 了解有关如何自行执行此操作的更多信息。

    渲染后,这些属性可用于配置服务器的响应。

    - children: node


    渲染与位置匹配的第一个子元素

    是独特的,因为它仅仅渲染一个路由。相反,与位置匹配的每个都会包含。

    参考以下代码:
    `

    
    
    

    `
    如果URL是/about,则将全部渲染,因为它们都与路径匹配。这是通过设计,允许我们以许多方式将组合到我们的应用程序中,如侧边栏和面包屑,引导标签等。

    然而,偶尔,我们只想选择一个<路线>来渲染。如果我们在/关于我们不想也匹配/:用户(或显示我们的“404”页面)。以下是使用Switch的方法:

    `

    import { Switch, Route } from 'react-router'
    
    
    
    
    
    
    

    `

    现在,如果我们在/ about,将开始寻找匹配的将匹配,将停止寻找匹配并呈现。同样,如果我们在/ michael,那么将呈现。


    这对于动画转换也是有用的,因为匹配的呈现与前一个相同的位置。

    `

    
    
    {/* there will only ever be one child here */}
    
    
    
    
    
    
    
    
    {/* there will always be two children here,
    one might render null though, making transitions
    a bit more cumbersome to work out */}
    

     

    `

    Switch props

    - location: object

    要用于匹配子元素而不是当前历史位置(通常是当前浏览器URL)的位置对象。

    - children: node

    的所有子项应为元素。只有匹配当前位置的第一个子元素才会呈现

    元素使用它们的路径匹配匹配,并且元素使用它们与prop相匹配。没有路径的或路由不正确的将始终与当前位置匹配。

    当您在中包含时,它可以使用任何的位置匹配道具:path,exact和strict。只是path prop的别名。

    如果给定位置支持,它将覆盖匹配的子元素上的path prop。

    `

    
    
    
    
    
    
    
    

    `

    history

    本文档中的“历史”和“历史对象”一词是指历史包,https://github.com/ReactTraining/history 这是React
    Router的唯一两个主要依赖之一(除了React本身)之外,并且其提供用于在各种环境中的JavaScript中管理会话历史的几种不同实现

    使用以下术语:

    “browser history” : DOM特定的实现,可用于支持HTML5历史记录API的Web浏览器
    “hash history” : 遗留网络浏览器的DOM特定实现
    “memory history” : 内存中的历史记录实现,可用于测试和非DOM环境(如React Native)

    history对象通常具有以下属性和方法:

    length : (number)历史堆栈中的条目数
    action : (string)当前动作(PUSH,REPLACE或POP)
    location : (object) 当前位置。具有以下属性:
    pathname: URL的路径
    search: URL查询字符串
    hash: URL哈希片段
    state: 位置特定的状态被提供给例如。当这个位置被推到堆栈上时,push(路径,状态)。仅在浏览器和内存历史记录中可用。
    push : (path, [state]) - (function) 将新条目推入历史堆栈
    replace : (path, [state]) - (function) 替换历史堆栈上的当前条目
    go(n) : (function) 将历史堆栈中的指针移动n个条目
    goBack() : (function) 相当于 go(-1)
    goForward() : (function) 相当于 go(1)
    block : (function) 防止导航 (https://github.com/ReactTraining/history#blocking-transitions)


    history is mutable

    history 对象是可变的。因此,建议从的渲染道具访问位置,而不是从history.location访问。这样可以确保您对于React的假设在生命周期挂钩中是正确的。例如:

    `

    class Comp extends React.Component {
    componentWillReceiveProps(nextProps) {
    // will be true
    const locationChanged = nextProps.location !== this.props.location
    
    // INCORRECT, will *always* be false because history is mutable.
    const locationChanged = nextProps.history.location !== this.props.history.location
    }
    }
    
    

    `

    详细信息参考:https://github.com/ReactTraining/history#properties


    location

    位置代表了应用程序现在的位置,您想要哪里,甚至是哪里。看起来像这样

    `

    {
    key: 'ac3df4', // not with HashHistory!
    pathname: '/somewhere'
    search: '?some=search-string',
    hash: '#howdy',
    state: {
    [userDefined]: true
    }
    }

    `

    路由器将在几个地方为您提供位置对象

    Route component as this.props.location
    Route render as ({ location }) => ()
    Route children as ({ location }) => ()
    withRouter as this.props.location

    它也发现在history.location,但你不应该使用它,因为它的可变。您可以在历史文档中阅读更多信息。

    https://reacttraining.com/web/api/history

    位置对象从不被突变,因此您可以在生命周期钩子中使用它来确定何时导航,这对数据获取和动画非常有用。

    `

    componentWillReceiveProps(nextProps) {
    if (nextProps.location !== this.props.location) {
    // navigated!
    }
    }


    `

    您可以提供位置而不是字符串到导航的各个地方:

    Web Link to
    Native Link to
    Redirect to
    history.push
    history.replace

    通常您只需使用一个字符串,但如果您需要添加一些“位置状态”,只要应用程序返回到该特定位置,就可以使用位置对象。如果您想基于导航历史而不仅仅是路径(如模态)分支UI,这很有用。

    `
    // 最常用的

    
    
    // but you can use a location instead
    const location = {
    pathname: '/somewhere'
    state: { fromDashboard: true }
    }
    
    
    
    history.push(location)
    history.replace(location)

    `

    最后,您可以将location传递给以下组件:

    Route   (https://reacttraining.com/web/api/Route/location)
    Switch  (https://reacttraining.com/web/api/Route/location)


    match

    匹配对象包含有关如何匹配URL的信息。匹配对象包含以下属性:

    params - (object)从对应于路径的动态段的URL解析的键/值对
    isExact - (boolean)true如果整个URL匹配(没有尾随字符
    path - (string)用于匹配的路径模式。作用于构建嵌套的
    url - (string)URL的匹配部分。作用于构建嵌套的 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

    如果路由没有路径,因此始终匹配,您将获得最接近的父级匹配。与Router一样。


    matchPath

    这允许您使用除了正常渲染循环之外的使用相同的匹配代码,例如在服务器上渲染之前收集数据依赖关系。

    `

    import { matchPath } from 'react-router'
    
    const match = matchPath('/users/123', {
    path: '/users/:id',
    exact: true,
    strict: false
    })

    `

    - pathname

    第一个参数是要匹配的路径名。如果在Node.js的服务器上使用这个,那么它将是req.url。

    - props

    第二个参数是匹配的道具,它们与匹配props相同route接受:

    `

    {
    path, // like /users/:id
    strict, // optional, defaults to false
    exact // optional, defaults to false
    }

    `

    withRouter

    您可以通过withRouter高阶组件访问历史对象的属性和最接近的的匹配。随着路由每次路由改变时,路由器会重新渲染其组件,路径与<路径>渲染道具:{match,location,history}相同。

    `

    import React from 'react'
    import PropTypes from 'prop-types'
    import { withRouter } from 'react-router'
    
    // A simple component that shows the pathname of the current location
    class ShowTheLocation extends React.Component {
    static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
    }
    
    render() {
    const { match, location, history } = this.props
    
    return (
    
    You are now at {location.pathname}
    ) } } // Create a new component that is "connected" (to borrow redux // terminology) to the router. const ShowTheLocationWithRouter = withRouter(ShowTheLocation)

     

    `

    重要的提示

    如果您使用withRouter来阻止更新被shouldComponentUpdate阻止,那么重要的是使用Router打包实现shouldComponentUpdate的组件。例如,使用Redux时

    `

    // This gets around shouldComponentUpdate
    withRouter(connect(...)(MyComponent))
    // This does not
    connect(...)(withRouter(MyComponent))


    `

    有关详细信息,请参阅本指南。 https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md


    静态方法和属性

    包装组件的所有非反应特定静态方法和属性将自动复制到“已连接”组件。


    Component.WrappedComponent

    被包装的组件在返回的组件上作为静态属性WrappedComponent公开,可以用于单独测试组件。

    `

    // MyComponent.js
    export default withRouter(MyComponent)
    
    // MyComponent.test.js
    
    import MyComponent from './MyComponent'
    render()

     

    `

    wrappedComponentRef: func

    将作为参考传递给包装组件的函数。

    `

    class Container extends React.Component {
    componentDidMount() {
    this.component.doSomething() 
    }
    
    render() {
    return (
     this.component = c}/>
    )
    }
    }

     

    `

    转载于:https://www.cnblogs.com/zhanghuiming/p/7592132.html

    你可能感兴趣的:(React-Router4.x中文文档)