React路由进阶

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情

一、react嵌套路由

在views文件夹下新建film文件夹，里面新建两个组件： 在Film.js增加嵌套路由：

<Switch>
        <Route path="/film/nowplay" component={NowPlay}></Route>
        <Route path="/film/comingsoon" component={Comingsoon}></Route>
        <Redirect from="/film" to="/film/nowplay"></Redirect>
      </Switch>

效果：

---

二、声明式导航

在FilmRouter文件夹下新建components文件夹，新建Tabbar.js组件，在components一些公共的组件放在这里面。而views文件夹放一些页面组件。 Tabbar.js组件，写入如下代码：

import React, { Component } from 'react'
import {NavLink} from 'react-router-dom'

export default class Tabbar extends Component {
  render() {
    return (
      <div>
          <ul>
              <li>
                  <NavLink to="/film">电影</NavLink>
              </li>
              <li>
                  <NavLink to="/cinema">影院</NavLink>
              </li>
              <li>
                  <NavLink to="/profile">我的</NavLink>
              </li>
          </ul>
      </div>
    )
  }
}

并且将Tabbar写入到路由里： 并且在ReactRouter.js中写好插槽： 效果： 可以看到点击那个，那个就会有activeclass，可以根据这个来进行高亮显示，并且我们通过浏览会退和前进，高亮也会随着改变。当然你也可以自定义这个class的name，只需要在每个NavLink增加一个属性actuveClassName就可以自定义高亮的类名。

---

三、编程式导航

在film文件夹下的nowPlay.js 函数组件中写入：

import axios from 'axios'
import React, { useEffect, useState } from 'react'
import { useHistory } from 'react-router-dom'
// import { useHistory } from 'react-router-dom' // 这种是router给hooks封装好的编程式跳转路由方法

export default function NowPlay(props) {
  
  let [movieList, setMovieList] = useState([])  
  
  useEffect(() => {
    axios({
        url: 'https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=3752570',
        method: 'get',
        headers: {
            'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.0","e":"1646314068530784943341569","bc":"110100"}',
            'X-Host': 'mall.film-ticket.film.list'
        }
    }).then((res) => {
        console.log(res)
        setMovieList(res.data.data.films)
    }, (err) => {
        console.log(err)
    })
  }, [])
//   const history = useHistory(); // 这种是router给hooks封装好的编程式跳转路由方法

  const detailHandle = (id) => {
    console.log(props)
    props.history.push(`/detail/${id}`)

    // history.push(`/detail/${id}`) // 这种是router给hooks封装好的编程式跳转路由方法
  }

  return (
    <div>
        {movieList.map((item) => 
            <li key={item.filmId} onClick={() => {
                detailHandle(item.filmId)
            }}>{item.name}</li>
        )}
    </div>
  )
}

可以看到效果： 只不过我们动态的详情组件还没写。

---

四、动态路由

react路由传参一： 定义好路由：<Route path="/detail/:filmId" component={Detaill}></Route>，在具体组件上进行传参： props.history.push(/detail/${id})，在Detail.js组件中获取接收到的参数： props.match.params.filmId

react路由传参二： 1、定义好路由：<Route path="/detail" component={Detaill}></Route> 2、this.props.history.push({pathname: '/xxx', query: {day: '12'}) （获取值：this.props.location.query.day）

react路由传参三： 3、this.props.history.push({pathname: '/xxx', state: {day: '88'}) (获取值：this.props.location.state.day）

三种传参数区别：只有第一种刷新会保留传参的id，其他两种会丢失。

追加一个详情路由及组件detail.js：

import React from 'react'

export default function Detaill(props) {
  
//   console.log(props.match.params.filmId) // 第一种方式路由获取参数 
//   console.log(props.location.query.filmId) // 第二种方式路由获取参数  
  console.log(props.location.state.filmId) // 第三种方式路由获取参数  


  return (
    <div>Detaill</div>
  )
}

以上是三种路由传参的接收方法。

在学习React的路上，如果你觉得本文对你有所帮助的话，那就请关注点赞评论三连吧，谢谢，你的肯定是我写博的另一个支持。