一、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
中写好插槽:
效果:
可以看到点击那个,那个就会有active
class,可以根据这个来进行高亮显示,并且我们通过浏览会退和前进,高亮也会随着改变。当然你也可以自定义这个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的路上,如果你觉得本文对你有所帮助的话,那就请关注点赞评论三连吧,谢谢,你的肯定是我写博的另一个支持。