React_路由+路由传参

路由

• 什么是单页面应用(扩展)
  。只有一个html页面的应用,所有页面的路由切换都由前端(js)控制,不会像后端发起请求
  。优点：
  • 响应速度快
  • 页面之间跳转可以添加转厂动画

  ---

  。缺点:
  • 首次加载内容过多,响应会慢一些
  • 不利于seo搜索引擎优化
  • seo:搜索引擎(百度搜索:搜索越靠前,而seo主要爬虫页面内容,但是单页面应用，只有一个html,而且是个空的div)

  ---

  。特点：
  • 可以改变url地址,并且不会重新刷新页面
  • 保留浏览器的历史纪录
  • 可以得到地址改变的监听
    可以改变地址：通过改变地址得到的监听拿到对应的路由地址,通过路由地址取到对应的内容，将内容渲染道对应的位置。

  ---

  路由适用于各个浏览器的作用

react中实现路由

在react中实现路由，浏览器端使用react-router-dom, react-router-dom提供了路由相关配置组件，在react路由的配置是通过组件完成的，

组件的配置

1，路由模式（history， hash） 对应组件：BrowserRouter, HashRouter
2，路由地址 对应组件 Route 的path属性
2，路由对应组件 对应组件 Route 的component属性
4，路由对应组件的渲染位置 对应组件 Route所在的位置就是路由的渲染位置
5，嵌套路由
6，路由传参

---

route属性

• 属性
  。 path:路由路径
  。exact :路由匹配关系为全等关系

---

• 渲染属性：
  。component:路由组件(一般试用版component)默认会将路由对象传递到
  。render:一个函数返回一个组件，不匹配都会执行,但是可以通过match属性来判断是否匹配当前路由(如果match是一个对象,如果不是match的值是null)

---

• 路由对象：
  。match:匹配信息(通过路由定义规则匹配到的信息,path,params,url)
  。location:地址信息,当前路由地址的信息
  。history:历史记录对象,可以通过该对象提供的方法控制路由跳转 (push,reaplace,goBack,…)

---

• 路由模式
  。选择模式 :BrowserRouter,HashRouter
  。定义规则：Route,Redirect,Switch
  。控制跳转 ：Link,NavLink,
  。扩展属性 ：withRouter是个高阶组件(HOC) 就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件，它只是一种模式，这种模式是由react自身的组合性质必然产生的

---

react路由传参

• params: 在定义路由规则的时候在path中使用 :name 的形式去定义参数名称
  。特点：显示在路由路径之中，是必传参数

 <Route path="/detail/:id" component={
   ComponentName} />

** 对应的接收方式是 match.params.id
** 场景：必须传递参数的页面（如：列表跳转详情）

---

• state：使用push或者replace或者Link to的值是对象的时候，使用对象进行路由跳转的是，传递的state属性，
  。 特点：隐示传递，可以用于传递复杂的数据，但是如果强制刷新页面传递的数据会丢失

  <Link to={
   {
   
     pathname: '/detail',
     state: {
   
       info: {
   }
      }
    }}

** 对应的接收方式是 location.state.info
** 场景：传递复杂数据

---

• search查询参数的形式：可以直接拼接在url地址后面使用？分割，多个参数使用&符号分割，或者使用对象形式跳转的时候传递到search属性中

  <Link to={
   {
   
      pathname: '/detail',
    search: '?id=1&name=1233'
  }}

** 对应的接收方式是 react内部没有提供，需要自己手动对地址栏解析
** 问题：如果是hash模式，使用window.location.search无法获取search查询参数，但是props.location是正常的
** 场景：非毕传参数，如果（一个表单页面，可以通过是否传递参数来判断是新增还是编辑）

---

• react存在的问题:配置不统一,没有父子关系，比较分散
• 容器组件:展示数据，展示内容
• react:每一个组件除了对应的视图组件还有对应的样式
• 组件:属性(props) 和事件(props的值是个函数) 子组件(props.children)

react-router

实现了路由的核心功能:版本过低

路由操作组件

• 下包react-router-dom

基于react-router,加入了在浏览器运行环境的一些功能：版本过低

• 获取路径名如下图:
  
• 两种路由模式(hash和history）
  。 所有的很组件只能调用一次,因为一个浏览器只有一个url地址,且所有的组件只能在根组件内使用

BrowserRouter组件(history模式)

• 使用pushState和popState事件构建路由,就是一个history模式的一个根组件。

HashRouter组件(hash）

• 使用window.location.hash和hashchan