【前-react】react-router知识点概述+小demo

概述

看完本文后你能了解到：
（1）Router和route的关系
（2）如何通过js和标签控制路由跳转和传递参数
（3）history对象push和replace的区别及其他函数的用法
（4）location对象里的变量及其获取方法

本文参考链接初探 React Router 4.0，想进一步了解的小伙伴可以移步这里。

React Router 中文文档

没事多逛逛文档也是极好的

Router和Route

react-router主要是用于Url跳转，其核心概念即为Router和Route。

Router相当于一个容器，用于包裹Route，一个Route即为一个Url。Route里面会包裹一个组件。当在浏览器里输入Url时，就会跳转到相应的Route并显示相关组件。

一个Router里面可以包含多个Route的伪代码为：

<Router>
  <div>
      <Route />
      <Route />
      <Route />
  </div
<Router>

这里需要包裹一个div，因为Router要求子组件只能有一个。

Router和History有三个种类型：
（1）HashHistory和HashRouter
（2）BrowerHistory和BrowerRouter
（3）createMemoryHistory和MemoryRouter

BrowerHistory和HashHistory主要区别在于Url格式：

使用hashHistory,浏览器的url是这样的：/#/user/liuna?_k=adseis
使用browserHistory,浏览器的url是这样的：/user/liuna

这样看起来当然是browerHistory更好一些，但是它需要server端支持。

使用hashHistory时，因为有 # 的存在，浏览器不会发送request，react-router 自己根据 url 去 render 相应的模块。

hashHistory 和 browserHistory 的区别

标签控制和Js控制

我们在进行路由跳转时，有两种方法，第一种是通过标签来完成跳转动作，例如


   {/*只渲染出第一个与当前访问地址匹配的 <Route> 或 <Redirect>。 */}
 <Switch>
    {/* 用了Switch 这里每次只匹配一个路由，所有只有一个节点。 */}
    <Route/>
    <Route/>
  </Switch>

    {/*Link  最简单的跳转，直接跳转到相应路径下并显示组件 */}
  <Link to={to} {...rest} />

    {/*渲染时将导航到一个新地址，这个新地址覆盖在访问历史信息里面的本该访问的那个地址 */}
  <Redirect to={to} {...rest} />

还有一种方式就是通过对象来控制路由跳转，即Js代码控制，例如