关于react-router-dom入门配置

react-router-dom入门配置

配置

参考：github
https://reacttraining.com/react-router/web/api/BrowserRouter

1. 导入import {BrowserRouter as Router, Route, Link} from 'react-router-dom'

2. 导入组件

import Home from './components/home/home'
import Film from './components/film/film'
import About from './components/about/about'

3. 配置路由路径和占位

<Menu.Item key="1">
home
</Menu.Item>
<Menu.Item key="2">
film
</Menu.Item>
<Menu.Item key="3">
about
</Menu.Item>

<Content style={{ padding: '0 50px',backgroundColor: '#ccc' }}>

//关键：
//home
//
//exact是精准匹配
//因为react-router-dom是模糊匹配的

如果film里面又有路由

一样的利用Route和Link
import {Route,Link} from 'react-router-dom'

<Sider style= {{width:'200px',backgroundColor:'#fff',height:'100%'}}>
<Menu
mode="inline"
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
style={{borderRight: 0 }}
>
<Menu.Item key="1">正在热映</Menu.Item>
<Menu.Item key="2">即将上映</Menu.Item>
<Menu.Item key="3">Top250</Menu.Item>



<Content style={{padding:'20px'}}>

坑

1. 组件还没定义好的话是看不到效果的