react-router-dom笔记

参考文章： 初探 React Router 4.0

• import as 关键字用来给导入的变量设置新的名字，同时可以将整个模块导入。

改名字：
import { lastName as surname } from './profile';

整体加载：
import * as circle from './circle';
console.log('圆面积：' + circle.area(4));
console.log('圆周长：' + circle.circumference(14));

• exact用于精准匹配路径，不用exact也会匹配到匹配的路径的子路径，这样两个路由组件都会显示。我们需要的是每次切换只会显示一个Route中指定的组件

<Route  exact path="/" component={App}></Route>
<Route path="/hot" component={Hot} ></Route>

• 传递参数到路由对应的组件：在参数前面加上: ,比如${match.url}/:id,

• match.params(函数式声明的组件中,match需要在函数参数中引入)或this.props.match.params（React class类render函数中）

• 路由路径参数传递到模板，用baseUrl/:id类似格式，组件中用match.params.id接收。

• Link组件通过to属性链接到对应path的Route组件后 会渲染component属性对应的组件到页面上。

• 路由的嵌套：${match.url}可以获取到当前的基础路径。然后在路由用到的组件中可以用。

• 路由的嵌套，直接在子组件模板中添加Route，Link，match.url引入基础路径

• Route 自带三个 render method 和三个 props 。

render methods 分别是：
<Route component>
<Route render>
<Route children>

props 分别是：
match
location
history

• 当访问地址和路由匹配时，一个 React component 就会被渲染，此时此组件接受 route props (match, location, history)。

• match 对象包含了 Route path 如何与 URL 匹配的信息，具有以下属性：
  params: object 路径参数，通过解析 URL 中的动态部分获得键值对
  isExact: bool 为 true 时，整个 URL 都需要匹配
  path: string 用来匹配的路径模式，用于创建嵌套的 Route
  url: string URL 匹配的部分，用于嵌套的 Link

• 在以下情境中可以获取 match 对象
  在 Route component 中，以 this.props.match获取
  在 Route render 中，以 ({match}) => () 方式获取
  在 Route children 中，以 ({match}) => () 方式获

• Router/Route 的改变：V4 Router组件里只能渲染一个组件，V2和V3可以渲染多个。

NavLink

Link 的特殊版，为页面导航准备的。因为导航需要有 “激活状态”。

• activeStyle: object
  如果不想使用样式名就直接写style

• activeClassName: string
  导航选中激活时候应用的样式名，默认样式名为 active

• exact: bool
  若为 true，只有当访问地址严格匹配时激活样式才会应用

• 在Route中同时使用render和component时render方法不会起作用！

• replace使得该链接的上一个链接回退时会跳过

• <Switch> 只渲染出第一个与当前访问地址匹配的 <Route> 或 <Redirect>
  为什么 RR4 机制里不默认匹配第一个符合要求的呢？
  答：这种设计允许我们将多个<Route>组合到应用程序中，例如侧边栏（sidebars）等等。

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

• 单页面应用程序最终组件的结构：BrowserRouter–>div–>链接组件和路由组件 。

• !!e.target.value.trim():表示将字符串转化为Boolean值，第一个感叹号对字符串取反，第二个字符串再次取反从而实现转换。