Renderings: (ps: I don't know why some pictures can't be displayed, but the links are all right)
1. Establish react project:
create-react-app douban cd douban npm start
2. The page uses the antd template of ant gold, so download the antd first
npm install antd --save
3. Create three files: movie.jsx,about.jsx,home,jsx. Focus on the corresponding page of movie. First, you need to import the component names of the first three files and the layout layout of antd in app.jsx:
Make sure to introduce the antd css style, otherwise the effect cannot be displayed. Add import 'antd/dist/antd.css' in the following code
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. After you make the desired effect, because you need to perform page Jump, import react router dom
npm install react-router-dom
Import after download
import from 'react-router-dom'
Route and Link are used in. HashRouter only needs to be used once in the whole website. Route is the routing rule and Link is the jump path
The main code of app.jsx is
render() { return <HashRouter> <Layout className="layout" style={}> <Header> <Menu theme="dark" mode="horizontal" defaultSelectedKeys={[window.location.hash.split('/')[1]]} style={{ lineHeight: '64px' }} > <Menu.Item key="home"> {/* to :Path to jump */} <Link to='/home'>home page </Link > </Menu.Item> <Menu.Item key="movie"> <Link to='/movie/in_theaters/1'> Film </Link > </Menu.Item> <Menu.Item key="about"> <Link to='/about'>about</Link> </Menu.Item> </Menu> </Header> <Content style={{ background: '#fff' }}> {/* path: Route matching path */} <Route path="/home" component=></Route> <Route path="/movie" component=></Route> <Route path="/about" component=></Route> </Content> <Footer style={{ textAlign: 'center' }}> </Footer> </Layout> </HashRouter> }
defaultSelectedKeys={[window.location.hash.split('/') [1]]} This code is mainly used to refresh the page you are looking at