React Router

概念

1. 根据不同的地址，展示不同的组件
2. 完成无刷新的地址切换 我们把实现了以上两个功能的插件，称之为路由

React Router

• react-router:路由核心库，包含路由功能相关的代码
• react-router-dom：利用路由核心库，结合实际页面实现跟页面路由密切相关的功能

url组成

• www.react.com/home?kw=33#…
• 协议名（schema）：https
• 主机名（host）
  • ip地址
  • 预设值：localhost
  • 域名
• 端口号（port）：443
  • 如果协议是http：端口号是80（默认），可以省略端口号
  • 如果协议是https：端口号是443（默认），可以省略端口号
• 路径（path）:/xxx/xx
• 地址参数（search，query）：?a=1&b=2
  • 附带的数据
• 哈希（hash、锚点）：#sasfag
  • 附带的数据,锚点定位

两种路由模式

• Hash Router
  • 根据url地址中的哈希值来确定展示的组件
  • 因为hash值变化，不会导致页面刷新
  • 这种模式的兼容性最好
• history Router
  • HTML5出现后，新增了Histrory API ，从此之后浏览器拥有了改变路径而不刷新页面的方式
  • history表示浏览器的历史记录，通过栈的方式存储
  • 根据页面路径来渲染那个组件
• history.length 获取栈内的历史记录的数量

路由组件

Router组件

它本身不做任何展示，仅提供路由模式配置，另外，该组件会产生一个上下文，上下文中会提供一些使用的方法，供其他相关组件使用.通常只有一个，包裹整个页面

• HashRouter:该组件使用Hash模式匹配
• BrowserRouter:该组件使用History模式匹配

上下文路由信息

• history:是react-router包装的对象， 和window.history没有关系
  • 我们利用该对象跳转路由，无刷新页面
  • props.history.push('')来进行跳转
• 为什么没有直接使用history对象
  • React-Router中有两种模式，如果使用Hash模式的话，window.history就跳转不了，包装后的是可以正常跳转的
  • 当使用window.history.pushState时，react没有办法知道地址发生变化了，结果导致无法刷新组件。

withRouter高阶组件

如果组件A在Route中包裹着，组件B在A中包含，没有直接包含在Route中，这时候B是没有路由信息的

• 可以<B {...props}>将A的路由信息，传递给B
• 将 B用withRouter高阶组件包裹起来，就可以了
• 因为内部有上下文信息，我们获取不到,withRouter自己可以获取

Route组件

• 根据不同的地址，展示不同的组件
• 重要属性
  • path:匹配的路径
    • 默认情况下，不区分大小写， 可以设置sensitive属性为true，来区分大小写
    • 默认情况下，只匹配初始目录，如果要精确匹配，配置exact属性为true。react-router-dom V6以上默认精确匹配
    • 如果不写path，则会匹配任意路径。react-router-dom V6以上匹配不到
  • component:匹配成功后展示的组件
• 可以写在任何地方，只要保证是BrowserRouter的后代元素就可以了

Switch

当匹配到一个之后，不再匹配其他组件，v6之后删除了这个组件

Link

实现一个不刷新页面的a标签