react 路由

React 路由

 

1、安装

cnpm install react-router-dom -S

 

2、引入react-router-dom 选择路由的形式

HashRouter:路由的根组件   也是路由的一种形式(hash路由)  带#号

BrowserRouter:路由的根组件  也是路由的一种形式(history路由) 不带#号

所有路由的配置项都必须在路由的根组件内部

 

3、引入Route

  Route是路由渲染的方式

  常用的属性:

  path:路由的路径

  component:需要渲染的组件  值是组件的名称

  render:需要渲染的组件  值是组件

  exact:完全匹配

 

 

4、路由跳转的方式

            A、a标签

            B、link

            C、NavLink

            D、编程式导航

 

Link && NavLink区别？

    前者没有选中的标识  后者会有选中的标识

    场景:前者非TabBar  后者TabBar

属性：

    activeClassName: 设置选中后的类名

    activeStyle:设置选中后的状态

 

5、路由重定向：

        Redirect:路由重定向

     属性：

        from:从哪里来

        to:到哪里去

        exact:完全匹配

建议最外层加上switch

6、Switch

     Switch是一个组件  作用是只匹配一个路由

 

7、路由嵌套：

      1、

          通过render的方式进行嵌套

      2、

          将嵌套的内容放在Switch的外面。

 

 

8、路由传参：

 动态路由（最多）

    A、在定义路由的时候通过/:属性的方式来定义传递参数的属性

 

    

B、在路由跳转的时候传递需要传递的数据

 

    

C、接收： this.props.match.params

 

 

query传值(其次)

A、在路由跳转的时候通过地址拼接的方式进行数据的传递(类似于get传值的方式)

 

     

B、接收的时候通过this.props.location.search 进行接收 (注意需要url模块的解析)

 

 

对象传值

 1、在路由跳转的时候通过对象的方式进行路由跳转

                   

 2、接收的时候通过this.props.location.query进行接收

     注意：刷新浏览器数据会丢失(慎用)

 

编程式导航

 

  this.props.history.push({pathname:"/detail",query:{id:item.id,name:item.name}})

                                                                                                                                 

component与render的区别

            render

                1、render可以渲染组件 以及标签

                2、render的渲染方式可以进行组件传参

                3、render的渲染方式可以进行逻辑判断

                4、render的渲染方式可以进行路由嵌套

                5、如果render需要路由的三个属性的情况下 需要手动传递

 

 

            component:

                1、只能渲染组件,因为component的值是组件的名称 而不是组件标签

                2、component的值因为是组件名称所以不能传值,也不能做逻辑判断  以及路由嵌套

                3、只要通过component渲染的组件那么这个组件的props身上就会多三个属性  history location match(优势)

    

     编程式导航：

            this.props.history.goBack()

            this.props.history.push()

            this.props.history.goForward()

            this.props.history.replace()