关于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.	配置路由路径和占位

	<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.	组件还没定义好的话是看不到效果的