React-Router 安装及使用

安装

        yarn add react-router-dom@4.3.0 -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 (

                    <BrowserRouter>

                    </BrowserRouter>

                )

            }

        3)创建路由匹配规则

            render() {

                return (

                    <BrowserRouter>

                        <Switch>

                            <Route path='匹配路径' component={对应加载的组件} />

                            <Route  component={Hello} />

                            // exact 作用:精准匹配

                            <Route path='/' component={} />

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

                            <Route component={默认组件} />

                        </Switch>

                    </BrowserRouter>

                )

            }

        4)link组件 导航组件

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

        使用方式同a标签

            引入Link组件

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

            使用

                <Link to='跳转的url'>导航的名称</Link>