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. 配置路由路径和占位
<Router>
<Layout className="layout">
<Header>
<Menu.Item key="1">
<Link to='/'>home</Link>
</Menu.Item>
<Menu.Item key="2">
<Link to='/film'>film</Link>
</Menu.Item>
<Menu.Item key="3">
<Link to='/about'>about</Link>
</Menu.Item>
</Header>
<Content style={{ padding: '0 50px',backgroundColor: '#ccc' }}>
<Route exact path="/" component={Home}/>
<Route path="/film" component={Film}/>
<Route path="/about" component={About}/>
</Content>
</Layout>
</Router>
//关键:
//<Link to='/'>home</Link>
//<Route exact path="/" component={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"><Link to='/movie/in_theaters'>正在热映</Link></Menu.Item>
<Menu.Item key="2"><Link to='/movie/in_theaters'>即将上映</Link></Menu.Item>
<Menu.Item key="3"><Link to='/movie/in_theaters'>Top250</Link></Menu.Item>
</Menu>
</Sider>
<Layout>
<Content style={{padding:'20px'}}>
<Route path='/movie/:movieType' component={MovieList} />
</Content>
</Layout>
坑
1. 组件还没定义好的话是看不到效果的
更多专业前端知识,请上 【猿2048】www.mk2048.com