react-router4的学习--React-router和React-router-dom的区别

学时候在网上看各种资料总会遇到这俩：React-router和React-router-dom
最早刚开始参与项目的时候也经常会看到这两个的import，心有疑问，但当时也没太注意。大概了解后就没在管了（其实是太懒）
现在抽空来点总结，记录下自己的学历过程。
如：

import {Switch, Route, Router} from 'react-router';
import {HashHistory, Link} from 'react-router-dom';

或者

import {Swtich, Route, Router, HashHistory, Link} from 'react-router-dom';

React-router-dom是在React-router的基础上增加了 link  BrowserRouter 和 HashRouter，即在浏览器环境下运行的一些功能。别的并没有什么区别，源码上也是从react-router导入再导出。
 

BrowserRouter：

原理是html5的 history api (pushState, replaceState 和 popstate 事件)，它不需要在url中加入“#”等的hash，页面跟随url动态同步变化。

<BrowserRouter basename={baseUrl}>
    <Route exact path='/' component={pageName} ></Route>
  </BrowserRouter>

basename: 就跟字面的意思一样，基准URL. 例如：“/home”

HashRouter：

跟字面的意思一样，通过哈希值来使页面和url保持一致，默认会有个# ，例如：localhost:3000/#/

Router的还包括MemoryRouter，NativeRouter，StaticRouter等不怎么常用，可以去看下：
https://reacttraining.com/react-router/web/api

 

Route：子路由，控制路径对应显示的组件；
     exact：严格匹配，控制匹配到/路径时不会再继续向下匹配
     path： 路径
     component：路径对应显示的组件

Link：其实就是页面上渲染后的a标签,如下图例子中的，具体参数作用从字面上大概就能看出来，
常用的：

• pathname - 要链接到的路径
• search - 查询参数
• hash - URL 中的 hash，例 #hash
• state - 存储到 location 中的额外状态数据

<Link to='/path' />
// 或者
<Link to={{
    pathname: '/path',
    search: '?data=aaa',
    hash: '#',
    state: {}
}} />

replace: bool

当设置为 true 时，点击链接后将替换历史堆栈中的当前条目，而不是添加新条目。默认为 false。

innerRef: fun

允许访问组件的底层引用

别的还有title、id 或 className 等。

NavLink： 为当前选择的路由设置类名、样式以及回调函数等

activeClassName: string
activeStyle: object
strict: bool  如果为 true，则在确定位置是否与当前 URL 匹配时，将考虑位置的路径名后面的斜杠。
Prompt：
用于在位置跳转之前给予用户一些确认信息，设置 when={true} 或 when={false} 以阻止或允许相应的导航

import { Prompt } from 'react-router'

<Prompt
  when={formIsHalfFilledOut}
  message="Are you sure you want to leave?"
/>

 

 

。。。待续