react-router-dom 實現左側導航

一、介紹react-router-domreact

https://reacttraining.com/react-router/web/example/basic 這個官網有不少栗子能夠練手web

1.1 HashRouter 和BrowserRouter後端

HashRouter 只能有一個子節點antd

<HashRouter>
　　<div>
　　　　<ul>
　　　　　　<li>
　　　　　　　　<Link to="/main">Home1</Link>
　　　　　　</li>
　　　　　　<li> 　　　　　　　　<Link to="/about">About1</Link>
　　　　　　</li>
　　　　</ul>
　　</div>
</HashRouter>

http://localhost:3000/#/admin/buttons //HashRouter是根路由

http://localhost:3000/admin/buttons         //BrowserRouter，主要用於先後端分離的時候使用

1.2 Routereact-router

exact={true}精確匹配less

<Route exact={true} path="/" component={Home} />

<Route path="/common" render={() =>
      <Common>
          <Route path="/common/order/detail/:orderId" component={OrderDetail} />
      </Common> } />

1.3 Link 導航前後端分離

<div>
　　<ul>
　　　　<li>
　　　　　　<Link to="/main">Home1</Link>
　　　　</li>
　　　　<li>
　　　　　　<Link to="/about">About1</Link>
　　　　</li>
　　</ul>
</div>

to 實現路由跳轉dom

to還可傳對象svg

<Link to={{pathname:'/three/7'}}>Three #7</Link>

//一個基本的location對象
{pathname：'/',search:'',hash:'',key:'123',state:{}}

定義函數

<Route path="/three/:number" />

取值：

this.props.match.params.number

1.4 Switch 匹配多個路由

<Route path="/" render={()=>
　　<Admin>
　　　　<Switch>
　　　　　　<Route path='/home' component={Home} />
　　　　　　<Route path="/ui/buttons" component={Buttons} />
　　　　　　<Route path="/ui/modals" component={Modals} />
　　　　　　<Redirect to="/home" />、 　　　　</Switch>
　　</Admin> } />

　　匹配到一個就不會往下執行

1.5 Redirect 路由重定向

<Redirect to="/home" />、

二、舉栗子

2.1 簡單例子

import React from 'react' import {HashRouter , Route , Link, Switch} from 'react-router-dom' import Main from './Main' import About from './about' import Topic from './topic' export default class Home extends React.Component{ render(){ return ( <HashRouter>
                <div>
                    <ul>
                        <li>
                            <Link to="/">Home</Link>
                        </li>
                        <li>
                            <Link to="/about">About</Link>
                        </li>
                        <li>
                            <Link to="/topics">Topics</Link>
                        </li>
                    </ul>
                    <hr/>
                    <Switch>
                        <Route exact={true} path="/" component={Main}></Route>
                        <Route path="/about" component={About}></Route>
                        <Route path="/topics" component={Topic}></Route>
                    </Switch>
                </div>
            </HashRouter> ); } }

2.2 嵌套子路由、獲取動態路由、未匹配路由

Home.js

import React from 'react' import { Link } from 'react-router-dom' export default class Home extends React.Component { render() { return ( <div>
                <ul>
                    <li>
                        <Link to="/main">Home1</Link>
                    </li>
                    <li>
                        <Link to="/about">About1</Link>
                    </li>
                    <li>
                        <Link to="/topics">Topics1</Link>
                    </li>
                    <li>
                        <Link to="/mosquito1">mosquito1</Link>
                    </li>
                    <li>
                        <Link to="/mosquito2">mosquito2</Link>
                    </li>
                </ul>
                <hr /> {this.props.children} </div> ); } }

router.js

import React from 'react' import { HashRouter as Router, Route, Link, Switch} from 'react-router-dom' import Main from './Main' import Info from './info' import About from './../route1/about' import Topic from './../route1/topic' import Home from './Home' import NoMatch from './NoMatch' export default class IRouter extends React.Component{ render(){ return ( <Router>
                <Home>
                    <Switch>
                        <Route path="/main" render={() =>
                            <Main>
                                <Route path="/main/:value" component={Info}></Route>
                            </Main> }></Route>
                        <Route path="/about" component={About}></Route>
                        <Route exact={true} path="/about/abc" component={About}></Route>
                        <Route path="/topics" component={Topic}></Route>
                        <Route component={NoMatch}></Route>
                    </Switch>
                </Home>
            </Router> ); } }

Main.js

import React from 'react' import { Link } from 'react-router-dom' export default class Main extends React.Component { render() { return ( <div> this is main page. <br/>
                <Link to="/main/test-id">嵌套路由1</Link>
                <br/>
                <Link to="/main/456">嵌套路由2</Link>
                <hr/> {this.props.children} </div> ); } }

info.js

import React from 'react' export default class Info extends React.Component { render() { return ( <div> 這裏是測試動態路由功能。 動態路由的值是：{this.props.match.params.value} </div> ); } }

NoMatch.js

import React from 'react' export default class Home extends React.Component { render() { return ( <div> 404 No Pages. </div> ); } }

注意：

<Home>
                    <Route path="/main" render={()=>
                        <Main>
                            <Route path="/main/a" component={About}></Route>
                        </Main> }></Route>
                    <Route path="/about" component={About}></Route>
                    <Route path="/topics" component={Topic}></Route>
                </Home>

1.render後的箭頭函數不要加大括號，這樣就不是返回了，而是執行裏面的函數

2.有子路由的Route不能使用 exact={true} 精確匹配，否則子路由沒法匹配

3.導入時可爲HashRouter 取別名

import {HashRouter as Router,Route,LinK} from 'react-router-dom'

4.頁面展現的內容經過 this.props.children

5.寫動態子路由

<Route path="/main/:value" component={Info}></Route>

獲取動態子路由

{this.props.match.params.value}

6.未匹配的路由

<Route component={NoMatch}></Route>

同時須要使用<Switch>標籤，否則有子路由的算沒法匹配而進入NoMatch組件

三、左側導航欄

antd-design 有 Menu導航菜單，可是若是菜單欄的配置是後臺給的話，須要遍歷數據獲取

首先配置router.js

<HashRouter>
　　<App>
　　　　<Switch>
　　　　　　<Route path="/login" component={Login}/>
          <Route path="/common" render={() =>
　　　　　　　　<Common>
　　　　　　　　　　<Route path="/common/order/detail/:orderId" component={OrderDetail} />
　　　　　　　　　</Common> 　　　　　　　　} 　　　　　　/> <Route path="/" render={()=>
　　　　　　　　<Admin>
　　　　　　　　　　<Switch>
　　　　　　　　　　　　<Route path='/home' component={Home} />
                    <Route path="/ui/buttons" component={Buttons} />
                    <Route path="/ui/modals" component={Modals} />
                    <Route path="/ui/loadings" component={Loadings} />
                    <Route path="/ui/notification" component={Notice} />
                    <Route path="/ui/messages" component={Messages} />
                    <Route path="/ui/tabs" component={Tabs} />
                    <Route path="/ui/gallery" component={Gallery} />
                    <Route path="/ui/carousel" component={Carousel} />
                    <Route path="/form/login" component={FormLogin} />
                    <Route path="/form/reg" component={FormRegister} />
                    <Route path="/table/basic" component={BasicTable} />
                    <Route path="/table/high" component={HighTable} />
                    <Route path='/rich' component={Rich} />
                    <Route path="/city" component={City} />
                    <Route path="/order" component={Order} />
                    <Route path='/bikeMap' component={BikeMap} />
                    <Route path='/user' component={User} />
                    <Route path="/charts/bar" component={Bar} />
                    <Route path="/charts/pie" component={Pie} />
                    <Route path="/charts/line" component={Line} />
                    <Route path="/permission" component={Permission} />
                    <Redirect to="/home" /> {/* <Route component={NoMatch} /> */} 　　　　　　　　　　</Switch>
　　　　　　　　</Admin> 　　　　　　} /> 　　　　</Switch>
　　</App>
</HashRouter>

menuConfig.js文件

const menuList = [ { title: '首頁', key: '/home' }, { title: 'UI', key: '/ui', children: [ { title: '按鈕', key: '/ui/buttons', }, { title: '彈框', key: '/ui/modals', }, { title: 'Loading', key: '/ui/loadings', }, { title: '通知提醒', key: '/ui/notification', }, { title: '全局Message', key: '/ui/messages', }, { title: 'Tab頁籤', key: '/ui/tabs', }, { title: '圖片畫廊', key: '/ui/gallery', }, { title: '輪播圖', key: '/ui/carousel', } ] }, { title: '表單', key: '/form', children: [ { title: '登陸', key: '/form/login', }, { title: '註冊', key: '/form/reg', } ] }, { title: '表格', key: '/table', children: [ { title: '基礎表格', key: '/table/basic', }, { title: '高級表格', key: '/table/high', } ] }, { title: '富文本', key: '/rich' }, { title: '城市管理', key: '/city' }, { title: '訂單管理', key: '/order', btnList: [ { title: '訂單詳情', key: 'detail' }, { title: '結束訂單', key: 'finish' } ] }, { title: '員工管理', key: '/user' }, { title: '車輛地圖', key: '/bikeMap' }, { title: '圖標', key: '/charts', children: [ { title: '柱形圖', key: '/charts/bar' }, { title: '餅圖', key: '/charts/pie' }, { title: '折線圖', key: '/charts/line' }, ] }, { title: '權限設置', key: '/permission' }, ]; export default menuList;

navleft.js

import React from "react"; import { Menu, Icon } from "antd"; import { NavLink } from "react-router-dom"; import MenuConfig from "./../../config/menuConfig"; import "./index.less"; const SubMenu = Menu.SubMenu; export default class NavLeft extends React.Component { componentWillMount() { const menuTreeNode = this.renderMenu(MenuConfig); this.setState({ menuTreeNode }); } // 菜單渲染
  renderMenu = data => { return data.map(item => { if (item.children) { return ( <SubMenu title={item.title} key={item.key}> {this.renderMenu(item.children)} </SubMenu>
 ); } return ( <Menu.Item title={item.title} key={item.key}> <NavLink to={item.key}>{item.title}</NavLink> </Menu.Item>
 ); }); }; render() { return ( <div>
        <div className="logo">
          <img src="/assets/logo-ant.svg" alt="" />
          <h1>Imooc MS</h1>
        </div>
        <Menu onClick={this.handleClick} theme="dark"> {this.state.menuTreeNode} </Menu>
      </div>
 ); } }

navleft.less

.nav-left{ .logo{ line-height: 90px; padding-left: 20px; background-color: #002140; img{ height: 35px;
        } h1{ color: #ffffff; font-size: 20px; display: inline-block; vertical-align: middle; margin: 0 0 0 10px;
        } } }

admin.js

<Row className="container">
                <Col span="4" className="nav-left">
                    <NavLeft/>
                </Col>
                <Col span="20" className="main">
                    <Header/>
                    <Row className="content"> {/* <Home/> */} {this.props.children} </Row>
                    <Footer/>
                </Col>
            </Row>

admin.less

.container{ .nav-left{ background-color:#001529; color: #ffffff; height: calc(100vh);
    } .main{ height: calc(100vh); background-color: @colorL; overflow: auto;
    } .content{ position: relative; padding: 20px;
    } }

效果：