React-Router 安装及使用

安装

        yarn add [email protected] -D

    引入核心路由器组件

        import { BrowserRouter, HashRouter } from 'react-router-dom'

        BrowserRouter:localhost:xxxx/user/liuna 服务器可知所有请求细节

        HashRouter:localhost:xxxx/#/user/liuna  使用#瞄点纯前端跳转,服务器不知请求细节

    路由器组件:  BrowserRouter, HashRouter

        它只是一个容器,用来装所有路径

    路径匹配组件:Router

        根据path路径,匹配对应的组件,把组件加载到路由器组件

    路由选择组件:Switch

        匹配Route,成功匹配1个Route后,则不会再往后匹配

        还可以进行失败路径的容错处理!

    路由匹配的使用

        1)引入核心组件

            import { BrowserRouter, HashRouter,Switch } from 'react-router-dom'

        2)创建路由容器

            render() {

                return (

                   

                   

                )

            }

        3)创建路由匹配规则

            render() {

                return (

                   

                       

                           

                           

                            // exact 作用:精准匹配

                           

                            // 容错,当以上所有Routee都为匹配成功时,会加载默认组件

                           

                       

                   

                )

            }

        4)link组件 导航组件

            他其实就是react-router的a标记

        使用方式同a标签

            引入Link组件

                import { Link } from 'react-router-dom'

            使用

                导航的名称