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

更多专业前端知识，请上 【猿2048】www.mk2048.com