關於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.  組件還沒定義好的話是看不到效果的