Fork me on GitHub

React-routerV4总结

BrowserRouter

作用:
    <Router> 使用 HTML5 提供的 history API (pushState, replaceState 和 popstate 事件) 来保持 UI 和 URL 的同步。
属性:
    basename: string
        当前位置的基准 URL。如果你的页面部署在服务器的二级(子)目录,你需要将 basename 设置到此子目录。 正确的 URL 格式是前面有一个前导斜杠,但不能有尾部斜杠。
    getUserConfirmation: func
        当导航需要确认时执行的函数。默认使用 window.confirm。
    forceRefresh: bool
        当设置为 true 时,在导航的过程中整个页面将会刷新。 只有当浏览器不支持 HTML5 的 history API 时,才设置为 true。
    keyLength: number
        location.key 的长度。默认是 6。
    children: node
        渲染单一子组件(元素)。
1
2
3
4
5
6
7
8
9
10
import { BrowserRouter } from 'react-router-dom'

<BrowserRouter
basename="/calendar"
forceRefresh="false"
getUserConfirmation={optionalFunc}
keyLength="10"
>
<Link to="/today" /> // 渲染为 <a href="/calendar/today">
</BrowserRouter>

HashRouter

作用:
    HashRouter 是一种特定的 <Router>, HashRouter 使用 URL 的 hash (例如:window.location.hash) 来保持 UI 和 URL 的同步。
属性:
    basename: string
        当前位置的基准 URL。正确的 URL 格式是前面有一个前导斜杠,但不能有尾部斜杠。
    getUserConfirmation: func
        当导航需要确认时执行的函数。默认使用 window.confirm。
    hashType: string
        window.location.hash 使用的 hash 类型。有如下几种:
        "slash" - 后面跟一个斜杠,例如 #/ 和 #/sunshine/lollipops
        "noslash" - 后面没有斜杠,例如 # 和 #sunshine/lollipops
        "hashbang" - Google 风格的 “ajax crawlable”,例如 #!/ 和 #!/sunshine/lollipops
        默认为 "slash"。
    children: node
        渲染单一子组件(元素)。
1
2
3
4
5
import { HashRouter } from 'react-router-dom'

<HashRouter>
<App/>
</HashRouter>

Link

作用:
    为您的应用提供声明式的、无障碍导航。        
属性:    
    to: string/object
        需要跳转到的路径(pathname)或地址(location)。
        需要跳转到的地址(location)。
    replace: bool
        当设置为 true 时,点击链接后将使用新地址替换掉访问历史记录里面的原地址。
        当设置为 false 时,点击链接后将在原有访问历史记录的基础上添加一个新的纪录。默认为 false。    
<Link to="/about">关于</Link>
<Link to={{
  pathname: '/courses',
  search: '?sort=name',
  hash: '#the-hash',
  state: { fromDashboard: true }
}}/>

NavLink

作用:    
    为当前 URL 添加 class 和 style。
属性:
    activeClassName: string
        选中 URL 是添加的class。
    activeStyle:object
        选中 URL 是添加的style。
    exact: bool    
        如果为 true,path 为 '/one' 的路由将不能匹配 '/one/two',反之,亦然。    
    strict: bool
        对路径末尾斜杠的匹配。如果为 true。path 为 '/one/' 将不能匹配 '/one' 但可以匹配 '/one/two'。
    isActive: func    
        为URL匹配添加更严谨的逻辑函数。    

Prompt

作用:    
    当用户离开当前页面前做出一些提示。
属性:
    message: string/func
        当用户离开当前页面时,设置的提示信息。
        当用户离开当前页面时,设置的回掉函数
    when: bool
        通过设置一定条件要决定是否启用 Prompt

MemoryRouter

作用:
    无 DOM 的环境。

属性:
    initialEntries: array
        一个 history 堆栈的数组。
    initialIndex: number
        在 initialEntries 数组中的初始index。
    getUserConfirmation: func
    keyLength: number
    children: node

Redirect

作用:
    重定向将替代当前的location 中的 history。
属性:
    to: string/object
        重定向string
        重定向object
    push: bool
        当为 true 时,替换掉整个history,而不是当前这一条。
    from: string    
        重定向的路径名。

Route

作用:
    它最基本的职责就是当页面的访问地址与 Route 上的 path 匹配时,就渲染出对应的 UI 界面。
属性:
    component: func
        只有当访问地址和路由匹配时,一个 React component 才会被渲染,此时此组件接受 route props (match, location, history)。
    render: func    
        此方法适用于内联渲染,而且不会产生上文说的重复装载问题。
    children: func
        有时候你可能只想知道访问地址是否被匹配,然后改变下别的东西,而不仅仅是对应的页面。
    path: string
    exact: bool
    strict: bool

Router

作用:底层路由接口组件,使用封装后的组件代替。    
    <BrowserRouter>
    <HashRouter>
    <MemoryRouter>
    <NativeRouter>
    <StaticRouter>
属性:
    history:object
        导航的history对象
    children: node

StaticRouter

定义:
    不会更改location的 <Router>,服务端渲染。
属性:
    basename: string
    location: string    
    context: object    
    children: node    

Switch

定义:
    只渲染出第一个与当前访问地址匹配的 <Route> 或 <Redirect>。
    我们只想渲染出第一个匹配的路由就可以了,于是 <Switch> 应运而生!
属性:
    children: node

对象和方法

history

路由分类

1.browser history -- HTML5 history API
2.hash history    -- 低版本浏览器
3.memory history  -- 无DOM环境(RN 和 Node)

histoty对象详解

length -- number 浏览历史堆栈中的条目数。        
action -- string 路由跳转到当前执行页面的动作,分为 PUSH、REPLACE、POP。
location -- object 当前访问地址信息组成的对象
    (pathname、search、hash、state)

push(path, [state]) 在历史堆栈信息里加入一个新条目。
replace(path, [state]) 在历史堆栈信息里替换掉当前的条目
go(n) 将 history 堆栈中的指针向前移动 n。
goBack() 等同于 go(-1)
goForward 等同于 go(1)
block(prompt) 阻止跳转

location

location 是指你当前的位置,将要去的位置,或是之前所在的位置
在以下情境中可以获取 location 对象:
    1.在 Route component 中,以 this.props.location 获取
    2.在 Route render 中,以 ({location}) => () 方式获取
    3.在 Route children 中,以 ({location}) => () 方式获取
    4.在 withRouter 中,以 this.props.location 的方式获取
可以在不同情境中使用 location:
    1.<Link to={location} />
    2.<NaviveLink to={location} />
    3.<Redirect to={location />
    4.history.push(location)
    5.history.replace(location)

match

match 对象包含了 <Route path> 如何与 URL 匹配的信息,具有以下属性:
    1.params: object 路径参数,通过解析 URL 中的动态部分获得键值对
    2.isExact: bool 为 true 时,整个 URL 都需要匹配
    3.path: string 用来匹配的路径模式,用于创建嵌套的 <Route>
    4.url: string URL 匹配的部分,用于嵌套的 <Link>
在以下情境中可以获取 match 对象
    1.在 Route component 中,以 this.props.match获取
    2.在 Route render 中,以 ({match}) => () 方式获取
    3.在 Route children 中,以 ({match}) => () 方式获取
    4.在 withRouter 中,以 this.props.match的方式获取
    5.matchPath 的返回值
注:当一个 Route 没有 path 时,它会匹配一切路径。

matchPath

pathname
props

withRouter

参考文档:
MDN-history
初探 React Router 4.0

-------------本文结束感谢您的阅读,如果本文对你有帮助就记得给个star-------------
Donate comment here