我是跟着视频教程做的一个案例，第一次跟着做和视频做的效果差不多，上周电脑重装之后做的demo不见了，我就又写一遍就出现切换路由页面不变的情况，我对照了视频的代码应该是一样的但是效果就是不一样
视频地址: https://www.bilibili.com/video/av41132987/?p=82
MovieContainer 是父组件 MovieContent 是子组件 里面调用的是豆瓣的电影接口
我的代码:
MovieContainer:
import React from 'react'
import { Menu,Layout} from 'antd';
const { Content,Sider } = Layout;
import {HashRouter,Link,Route} from 'react-router-dom'
import MovieContent from '@/components/movie/MovieContent'
export default class MovieContainer extends React.Component{
constructor(props){
super(props);
this.state = {}
}
render() {
return <Layout style={{height: '100%'}}>
<Sider width={200} style={{background: '#fff', height: "477px"}}>
<Menu
mode="inline"
defaultSelectedKeys={["1"]}
style={{height: '100%'}}
>
<Menu.Item style={{margin: 0, lineHeight: "55px", height: "55px"}} key="1">
<Link to="/movie/in_theaters/1">正在热映</Link>
</Menu.Item>
<Menu.Item style={{margin: 0, lineHeight: "55px", height: "55px"}} key="2">
<Link to="/movie/coming_soon/1">即将上映</Link>
</Menu.Item>
<Menu.Item style={{margin: 0, lineHeight: "55px", height: "55px"}} key="3">
<Link to="/movie/top250/1">Top250</Link>
</Menu.Item>
</Menu>
</Sider>
<Layout style={{paddingLeft: "1px"}}>
<Content style={{backgroundColor: "#fff"}}>
<Route path="/movie/:type/:page" component={MovieContent}></Route>
</Content>
</Layout>
</Layout>
}
}
MovieContent:
import React from 'react'
import { Spin, Alert } from 'antd';
import fetchJSONP from 'fetch-jsonp'
import MovieItem from '@/components/movie/MovieItem'
export default class MovieContent extends React.Component {
constructor(props) {
super(props);
this.state = {
movies:[],//电影列表数据
nowPage:parseInt(props.match.params.page)||1,//当前是第几页
pageSize:14,//每页显示多少条数据
total:0,//当前电影分类下总共有多少条数据
isLoading:true,//数据是否正在加载 true为正在加载中
movieType:props.match.params.type//要获取的电影类型
}
}
componentDidMount() {
this.loadMovieListByTypeAndPage();
}
componentWillUnmount() {
this.mounted = false;
}
render() {
return <div>
{this.renderList()}
</div>
}
loadMovieListByTypeAndPage = ()=>{//根据电影类型和页码获取电影数据
this.mounted = true;
const start = this.state.pageSize * (this.state.nowPage - 1);//开始获取数据的索引
const url = `https://api.douban.com/v2/movie/${this.state.movieType}?start=${start}&count=${this.state.pageSize}`;
fetchJSONP(url)
.then(response=>{
return response.json()
})
.then(data=>{
console.log(data);
if(this.mounted) {
this.setState({
isLoading: false,//隐藏loading效果
movies: data.subjects,//为电影列表重新赋值
total: data.total//将该类型数据总条数保存到state上
})
}
})
};
renderList = ()=>{//渲染电影列表的方法
if(this.state.isLoading){//如果isLoading为true表示正在加载中 返回Spin
return <Spin tip="Loading...">
<Alert
message="不要催！越催越慢！"
description="马上就好了哦！"
type="info"
/>
</Spin>
}else {//否则表示加载完成
return <div>
{this.state.movies.map(item =>{
return <MovieItem {...item} key={item.id}></MovieItem>
})}
</div>
}
};
}
以上就是这两个文件的代码了