react-route配合豆瓣api实现电影分类小项目

写在前面

本项目使用豆瓣的api和react的路由跳转功能实现页面的基本切换：1.可能因为豆瓣图片防盗链的关系，图片不显示；2.项目使用antd组件库进行项目页面的布局；3.在解决跨域方面使用fetch-jsonp工具

这篇博客我记录下自己的每一步操作，主要为了巩固知识点，不准确的地方请留言指出，不足之处请谅解。

项目代码地址：https://github.com/jishuaizhen/react-movie.git

一、页面布局

1. 顶部
   顶部为首页、电影、关于导航栏，主要实现了电影部分的功能

2. 内容区域
   内容区域为电影模块下的正在热映、即将上映、top250三部分，三部分布局相似，主要是为了练习react的路由切换。

3. 底部
   底部为了配合布局，可以忽略。

二、主入口文件App.js

1.使用antd中的layout组件进行布局
2.HashRouter，Route，Link为react路由切换主要使用的组件：HashRouter表示路由的跟容器，所有的路由信息都要包裹在HashRouter中，一个网站内只要使用一次HashRouter即可，HashRouter中只能有一个根元素；Route表示路由规则，Route上有两个重要的属性，path和component；Link表示路由的链接<Link to=''>
3.Route就是我们创建的路由，path对应路径，component对应组件，Rroute为占位符，可以直接替代Vue中的router-view； 默认情况下路由是模糊匹配的，为Route添加exact</