React路由配置与跳转传值

React的 一/二级路由 跳转传值 （图解）

一. 路由

1. 一级路由

React的一级路由还是比较简单的，会有些繁琐，但是并不困难，我将会写一个底部tabbar选项卡切换的案例（图解），来告诉大家一级路由的配置，请搭配图片进行学习，注释很清楚。

        1.创建React项目（前一篇有讲怎么创建）

        2.在src文件路劲下创建一个router文件夹，router文件夹里面再创建两个文件夹，

           一个用来存放总路由汇总（allRouter），另外一个从来存放一级的路由页面(routers)

        3.在routers里面创建一个文件夹views，用来存放自己的路由页面，看情况所需创建页面

        4.在路由汇总文件夹下（allRouter），创建一个js文件IndexRouter（在这个js文件进行操作）

                4.1. 引入操作路由的组件

                import { HashRouter, Route, Switch, Redirect, NavLink } from 'react-router-dom'

                4.2. 引入要进行路由跳转的组件

                4.3. HashRouter标签作为最外层的包裹，Switch为第二层，Route为第三层，

                       Redirect与 Route同层

                       HashRouter 保持页面的ui与url的同步

                       Switch 到跳转到某个页面时 刷新改页面不会消失

                       Route 进行跳转分配路由 path用于填写导航栏路由地址

                       component用于进行渲染当前匹配到的组件

                       Redirect 重定向

                       to与from可以简单理解为如果from里写的地址栏地址为'/'那么用to就跳转到'/main'  

                       exact进行严格匹配

        5. 路由配置完之后，写底部的tabbar切换

                5.1. 创建一个div标签，写在HashRouter里面，与Switch同级

                5.2. 使用NavLink进行跳转，NavLink是双标签，中间可以添加文字

                        activeClassName 点击的时候添加类名 其余元素则取消 用于高亮

                        to 导航栏要跳转的地址 要先进行配置

        6.在App.js引入IndexRouter（路由汇总js），然后在页面渲染

   图1为 IndexRouter（路由汇总js）页面

   图2为 App.js 页面

   图3为项目文件的层次关系

   图4为效果图

（图一）

（图2）

        

（图3）

（图4）

2. 二级路由

 当学会一级路由以后，二级路由也就信手拈来了，我会用一个分类导航切换的案例（图解），来   教会大家如何使用二级路由。

        1. 在views(一级路由文件夹)下创建foxbase文件夹，里面写二级路由页面，我这里

            写的是Food与Drink

        2.  在一级路由，需要用到二级路由的一级页面，导入二级路由页面，引入配置

             路由的组件（Route, Redirect, NavLink, Switch）

        3. 进行路由配置，一级页面不需要HashRouter，直接用Swith标签包裹，里面写Rout

            进行配置路由，用Redirect重定向到一级路由的二级路由页面(/main/food)

        3. 配置完路由之后，用NavLink标签进行点击跳转，to里写/一级路由/二级路由

        图5 为Main页面  Main是一级路由 Food与Drink 页面是二级页面，二级路由

                需要在一级路由里配置

        图6 为效果图

（图5）

（图6）

 3. 路由传值

  想实现一个页面去另一个页面的时候携带值，需要history属性与拼接的字符，我这里是Food页面    去Drink页面的时候传值，通过这个案例，告诉大家如何进行路由跳转传值。

        1. 在Food页面写一个button按钮，给一个点击事件，定义constructor钩

        子（会在挂载前调用），定义一个id值为15，点击事件里面写方法

// 跳转传值
goDrink = () => {
    this.props.history.push(`/main/drink/${this.state.id}`)
}

        2. 在配置路由的页面，重新设置一下路径       

 <div className="dav">
    {/* 路由跳转 */}
    <NavLink to='/main/food' activeClassName='active'>食物</NavLink>
    <NavLink to='/main/drink/:id' activeClassName='active'>饮品</NavLink>
 </div>
 {/* 配置路由 */}
 <Switch>
    <Route path='/main/food' component={Food}></Route>
    <Route path='/main/drink/:id' component={Drink}></Route>
    <Redirect from='/main' to='/main/food'></Redirect>
 </Switch>

        3. 在Drink页面写constructor，用super(props)进行接收，用componentDidMount

        （组件挂载后调用）打印查看传过来的值

componentDidMount() {
    console.log(this.props.match.params);
}

 图7 为效果图

（图7）