react制作豆瓣电影详细过程（一）

最新推荐文章于 2019-10-05 15:20:37 发布

原创最新推荐文章于 2019-10-05 15:20:37 发布 · 置顶 · 793 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#react #antd #react-router

web前端专栏收录该内容

30 篇文章

订阅专栏

本文详细介绍了如何使用React、antd和react-router创建豆瓣电影应用的过程。首先通过建立React项目，然后引入antd库并创建movie、about和home三个页面组件。在app.jsx中配置路由规则，利用HashRouter、Route和Link实现页面跳转，确保刷新后仍能保持在原先查看的页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：（ps:不知道为什么有的图片显示不出来，但是链接都是对的）
在这里插入图片描述
1.建立react项目：

create-react-app douban
cd douban
npm start

2.页面用了蚂蚁金服的antd模板，所以先下载antd

npm install antd --save

3.创建三个文件，分别是movie.jsx,about.jsx,home,jsx,重点讲解movie这个页面里的相对应的页面。首先在需要在app.jsx里导入前面三个文件的组件名和antd的layout布局：在这里插入图片描述
一定要引入antd css样式,不然无法显示效果，在下面的代码里加上 import ‘antd/dist/antd.css’

import Movie from './movie.jsx'
import About from './about.jsx'
import Home from  './home.jsx'
import {
  Layout, Menu, Breadcrumb, Icon,
} from 'antd';

const { SubMenu } = Menu;
const {
  Header, Content, Footer, Sider,
} = Layout;

4.做成自己想要的效果后，因为要进行页面跳转等，所以导入react-router-dom

npm install react-router-dom

下载完成后导入

import {HashRouter,Link,Route} from 'react-router-dom'

Route和Link在中使用，HashRouter在整个网站中仅需使用一次，Route是路由规则，Link 是跳转路径
app.jsx主要代码为

 render() {
        return <HashRouter>
           <Layout className="layout" style={{height:"100%"}}>
                <Header>
                
                <Menu
                    theme="dark"
                    mode="horizontal"
                    defaultSelectedKeys={[window.location.hash.split('/')[1]]}
                    style={{ lineHeight: '64px' }}
                >
                    <Menu.Item key="home">
                    {/* to :要跳转的路径 */}
                        <Link to='/home'>首页
                        </Link >
                    </Menu.Item>
                    <Menu.Item key="movie">
                        <Link to='/movie/in_theaters/1'> 电影
                        </Link >
                    </Menu.Item>
                    <Menu.Item key="about">
                        <Link to='/about'>关于</Link>
                    </Menu.Item>
                </Menu>
                </Header>
                <Content style={{ background: '#fff' }}>
                {/* path：路由匹配路径 */}
                <Route path="/home" component={Home}></Route>
                <Route path="/movie" component={Movie}></Route>
                <Route path="/about" component={About}></Route>
               
                </Content>
                <Footer style={{ textAlign: 'center' }}>
                   
                </Footer>
            </Layout>
        </HashRouter>
    }

defaultSelectedKeys={[window.location.hash.split(’/’)[1]]}这句代码主要是为了刷新后依然在本来正在看的页面