react路由的基本使用

路由的基本使用

        1.明确好界面中的导航区、展示区
        2.导航区的a标签改为Link标签
                    <Link to="/xxxxx">Demo</Link>
        3.展示区写Route标签进行路径的匹配
                    <Route path='/xxxx' component={Demo}/>
        4.<App>的最外侧包裹了一个<BrowserRouter>或<HashRouter>

NavLink：

        NavLink可以实现路由链接的高亮，通过activeClassName指定样式名

switch

        1.通常情况下，path和component是一一对应的关系。
         2.Switch可以提高路由匹配效率(单一匹配)。

路由严格匹配模式  exact，不要随便开启。

路由传递参数三种方法

1.params参数
        路由链接(携带参数)：<Link to='/demo/test/tom/18'}>详情</Link>
        注册路由(声明接收)：<Route path="/demo/test/:name/:age" component={Test}/>
        接收参数：this.props.match.params
2.search参数
        路由链接(携带参数)：<Link to='/demo/test?name=tom&age=18'}>详情</Link>
        注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>
        备注：获取到的search是urlencoded编码字符串，需要借助querystring解析
3.state参数
        路由链接(携带参数)：<Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}>详情</Link>
        注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>
        接收参数：this.props.location.state
        备注：刷新也可以保留住参数