react-router-dom 学习总结

说在最前

使用React构建的单页面应用，要想实现页面间的跳转。就需要使用到路由，在React中，常用的有两个包可以实现这个需求，即react-router和react-router-dom。那么这两个包有什么区别呢？不同之处就是后者比前者多出了<Link> <BrowserRouter>这样的 DOM 类组件。
因此我们只需引用 react-router-dom 这个包就行了。

安装

进入项目目录
npm install react-router-dom --save-dev

组件

< BrowserRouter >

保证你的 UI 界面和 URL 保持同步。可以将其理解为一个容器，用来放Route、Link。
此组件拥有以下属性：

• basename: string
  作用：为所有位置添加一个基准URL
  使用场景：若需要把页面部署到服务器的二级目录，可以使用 basename 设置到此目录。

<BrowserRouter basename="/smart" />
<Link to="/user" /> // 最终渲染为 <a href="/smart/user">

• getUserConfirmation: func
  作用：导航到此页面前执行的函数，默认使用 window.confirm
  使用场景：当需要用户进入页面前执行什么操作时可用。
• forceRefresh: bool
  作用：当浏览器不支持 HTML5 的 history API 时强制刷新页面。

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

• keyLength: number
  设置它里面路由的 location.key 的长度。默认是6。（key：点击同一个链接时, location.key 都会改变。）
• children: node
  作用：渲染唯一子元素。
  使用场景：作为一个 Reac t组件，天生自带 children 属性。

< Route >

< Route >是react路由中最重要的组件。
作用：当页面的访问地址与 Route 上的 path 匹配时，就渲染出对应的 UI 界面。
< Route > 自带三个 render 方法和三个 props 。
三个自带render方法

• < Route component>
• < Route render>
• < Route children>

每种 render method 都有不同的应用场景，同一个 应该只使用一种 render method ，大部分情况下你将使用 component 。

props 分别是：

• match
• location
• history

component
只有当访问地址和路由匹配时，一个 React component 才会被渲染，此时此组件接受 route props (match, location, history)。
当使用 component 时，router 将使用 React.createElement 根据给定的 component 创建一个新的 React 元素。

import Audit from 'Common/audit'
<Route exact strict path="/user/wiki/audit" component={Audit} />

exact: bool
如果为 true，path 为 ‘/one’ 的路由将不能匹配 ‘/one/two’，反之，亦然。
strict: bool
对路径末尾斜杠的匹配。如果为 true。path 为 ‘/one/’ 将不能匹配 ‘/one’ 但可以匹配 ‘/one/two’。
如果要确保路由没有末尾斜杠，那么 strict 和 exact 都必须同时为 true
render:func
此方法适用于内联渲染，不会出现重复装载。

//若信息存在加载跳转功能页 否则跳转到login
<Route
    exact
    path="/"
    render={() => {
        const userInfo = sessionStorage['userInfo']
        return userInfo ? <Redirect from="/" to="/user" /> : <Login />
    }}
 />

children: func
访问地址是否被匹配，然后改变下别的东西。例如，样式。

< Link >

常常使用自带的路径跳转组件Link,通过< Link to=“path”></ Link>实现跳转。这个与a标签及其相似，但是，对比< a >,Link组件避免了不必要的页面重新加载。（react的创新之处在于，它利用虚拟DOM的概念和diff算法实现了对页面的"按需更新"，react-router很好地继承了这一点）

• to: string
  作用：跳转到指定路径
  使用场景：单纯的跳转。
• to: object
  作用：携带参数跳转到指定路径
  作用场景：比如你点击的这个链接将要跳转的页面需要展示此链接对应的内容，又比如这是个支付跳转，需要把商品的价格等信息传递过去。

<Link to={{
  pathname: '/course',
  search: '?sort=name',
  hash: '#the-hash',
  state: { price: 18 }
}} />

将会被转换为location对象
replace: bool
为 true 时，点击链接后将使用新地址替换掉上一次访问的地址。

< NavLink >

这是 的特殊版，顾名思义这就是为页面导航准备的。因为导航需要有 “active状态”。
activeClassName: string
导航选中激活时候应用的样式名，默认样式名为 active

<NavLink
  to="/about"
  activeClassName="selected"
>MyBlog</NavLink>

activeStyle: object
不想写样式名时，可以直接写style
exact: bool
若为 true，只有当访问地址严格匹配时active样式才会应用
strict: bool
若为 true，只有当访问地址后缀斜杠严格匹配时active样式才会应用
isActive: func
决定导航是否激活，或者在导航激活时候做点别的事情。不管怎样，它不能决定对应页面是否可以渲染。

< Switch >

只渲染出第一个与当前访问地址匹配的 <Route> 或 <Redirect>。
访问 /about，那么组件 About User Nomatch 都将被渲染出来，因为他们对应的路由与访问的地址 /about 匹配。如果包上switch，则只会渲染第一个匹配的路由。

<Route path="/about" component={About}/>
<Route path="/:user" component={User}/>
<Route component={NoMatch}/>

children: node
下的子节点只能是 或 元素。只有与当前访问地址匹配的第一个子节点才会被渲染。 元素用它们的 path 属性匹配， 元素使用它们的 from 属性匹配。如果没有对应的 path 或 from，那么它们将匹配任何当前访问地址。

< Redirect >

<Redirect> 渲染时将导航到一个新地址，这个新地址覆盖在访问历史信息里面的本该访问的那个地址。

• to: string
  重定向的 URL 字符串

• to: object
  重定向的 location 对象

• push: bool
  若为真，重定向操作将会把新地址加入到访问历史记录里面，并且无法回退到前面的页面。

• from: string
  需要匹配的将要被重定向路径。

Prompt

当用户离开当前页面前做出一些提示。

message: string
当用户离开当前页面时，设置的提示信息。

message: func
当用户离开当前页面时，设置的回掉函数

<Prompt message={location => (
  `Are you sure you want to go to ${location.pathname}?` 
)} />

when: bool
启用 Prompt 的条件