React 学习笔记：路由（四）

react-router 4.x
    1. 安装：npm install --save react-router react-router-dom
    2. 在页面中配置
        1. 引入 import { Route,BrowserRouter,Switch } from "react-router-dom"
        2. 基本配置
            路由配置：
            <BrowserRouter>
                <Switch>
                    <Route path='/about' component={About}></Route>
                    <Route path='/' component={Home}></Route>
                </Switch>
            </BrowserRouter>
            导航配置：
            <Link to='/'>首页</Link>
        3. 4.x版本路由配置规则：
            从上往下匹配，只要有匹配成功的，就立即停止。
        4. 精准匹配
            exact 精准匹配：<Route exact path='/abcd' />
            作用：用户访问的路径必须和path中的路径一模一样，才匹配成功。
        5. 路由嵌套
            1.路由中出现子级路由，就是路由嵌套
            2.父级组件作为嵌套路由的标签
            3.嵌套路由中使用<Switch></Switch>包裹所有的路由
            4.子级路由的path路径要带父级路径
            举例：
            <BrowserRouter>
              <Switch>
                  <Route exact path='/' component={Home}></Route>
                  <Route path='/about' component={About}></Route>
                  {/* <Route path='/kemu' component={Kemu}></Route> */}
                  <!-- 科目是由子级路由的，就是一个嵌套路由 -->
                  <Kemu path='/kemu'>
                    <Switch>
                      <Route path='/kemu/yuwen' component={Yuwen}></Route>
                      <Route path='/kemu/shuxue' component={Shuxue}></Route>
                      <Route path='/kemu/yingyu' component={Yingyu}></Route>
                    </Switch>
                  </Kemu>
              </Switch>
          </BrowserRouter>

 

路由传递携带参数：

①在路由定义路由参数：

<Route path="/detail/:id" component={Detail}></Route>

②使用<Link to=" ">调用

<Link to={`/detail/${item.id}`}>

③在详情页接收数据，方法：this.props.match.params.属性

        return(
            <div>
               详情页面:{this.props.match.params.id}
            </div>
        )