react-router和react-router-dom

react-router还是 react-router-dom
在 React 的使用中,我们一般要引入两个包,react 和 react-dom,那么 react-router 和react-router-dom 是不是两个都要引用呢?
非也,坑就在这里。他们两个只要引用一个就行了,不同之处就是后者比前者多出了 <Link> <BrowserRouter> 这样的 DOM 类组件。
因此我们只需引用 react-router-dom 这个包就行了

withRouter

withRouter:这个方法是把一个非路由管控的组件,变成路由管控的组件,可以使用this.props获取到 history、location、match
使用方法在export default 组件时用withRouter(APP)
受路由管控组件例:<Route path={'/login'} component={Login}/>

BrowserRouter

BrowserRouter:一个使用了 HTML5 history API 的高阶路由组件,保证你的 UI 界面和 URL 保持同步。此组件拥有以下属性:
使用方法:

import { BrowserRouter } from 'react-router-dom';
<BrowserRouter
  basename={string}
  forceRefresh={bool}
  getUserConfirmation={func}
  keyLength={number}
>
  <App />
</BrowserRouter>
API:

basename: string
所有位置的基准 URL。如果你的应用程序部署在服务器的子目录,则需要将其设置为子目录。 basename 的正确格式是前面有一个前导斜杠,但不能有尾部斜杠。

<BrowserRouter basename="/admin">
  <Route path={'/login'} component={Login}/>
</BrowserRouter>
上例中的login跳转的URL地址最终将被呈现为https://www.xxxx.com/admin/login

forceRefresh: bool
如果为 true ,在导航的过程中整个页面将会刷新。一般情况下,只有在不支持 HTML5 history API 的浏览器中使用此功能。

<BrowserRouter forceRefresh={! 'pushState' in window.history} />

keyLength: number
作用:设置它里面路由的 location.key 的长度。默认是6。(key的作用:点击同一个链接时,每次该路由下的 location.key都会改变,可以通过 key 的变化来刷新页面。)
使用场景:按需设置。
getUserConfirmation: fn
用于确认导航的函数,默认使用 window.confirm。例如,当从 /a 导航至 /b 时,执行一个callback会使用默认的 confirm 函数弹出一个提示,用户点击确定后才进行导航,否则不做任何处理。

详情参考

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • React Router教程 React项目的可用的路由库是React-Router,当然这也是官方支持的。它也分...
    IT老马阅读 58,956评论 0 49
  • 本文将开始详细分析如何搭建一个React应用架构。 一. 前言 现在已经有很多脚手架工具,如create-reac...
    字节跳动技术团队阅读 4,399评论 1 23
  • React Router 4.0 (以下简称 RR4) 已经正式发布,它遵循React的设计理念,即万物皆组件。所...
    梁相辉阅读 97,647评论 24 195
  • React Router 4.0 (以下简称 RR4) 已经正式发布,它遵循React的设计理念,即万物皆组件。所...
    world_7735阅读 1,553评论 0 2
  • 在这个教程里,我们会从一个例子React应用开始学习react-router-dom。其中你会学习如何使用Link...
    uncle_charlie阅读 34,758评论 1 40