前端框架react-router 实例

前端开发工作怎么样 前端开发工作总结计划 武汉前端开发2年工作经验薪资

react-router 实例

使用理由:react 本身并没有路由功能,所以必须借助于第三方的库,也是react推荐的 react-router ,所以我就没有拒绝的理由。
我们就开始吧!
首先,中文文档上提供的内容我就不复制了,直接看代码。
代码顺序是我的顺序,将就着看吧!

第一步: 先从 ant.design 中选择了一个 MENU 的组件,用来配合 router 使用。
react 代码

// Menu.jsx 文件
import React, { Component } from ‘react’
import { Menu, Icon } from ‘antd’
// 这两个是变量声明是 ant 组件需要
const SubMenu = Menu.SubMenu
const MenuItemGroup = Menu.ItemGroup
// 左侧菜单模板取自于 ant.design 组件库 用了MENU 的一个组件只在‘选项一’和‘选项二’做了配置路由
const MenuListDom = React.createClass({
    getInitialState() {
        return {
            current: ‘1’,
            openKeys: [],
        }
    },
    handleClick(e) {
        window.location.hash = e.key // 被点击元素的‘key’的值‘about’就是页面跳转的路径
        this.setState({
            current: e.key,
            openKeys: e.keyPath.slice(1),
        })
    },
    onToggle(info) {
        console.log(‘onToggle’, info)
        this.setState({
            openKeys: info.open ? info.keyPath : info.keyPath.slice(1),
        })
    },
    render: function() {
        return (
            <Menu
                onClick={this.handleClick}
                style={{ width: 240 }}
                openKeys={this.state.openKeys}
                onOpen={this.onToggle}
                onClose={this.onToggle}
                selectedKeys={[this.state.current]}
                mode=”inline”
            >
                <SubMenu
                    key=”sub1″
                    title={
                        <span>
                            <Icon type=”mail” />
                            <span> 导航一 </span>
                        </span>
                    }
                >
                    <Menu.Item key=”about”>
                        {‘ ‘}
                        /*about就是将要被跳转的路径*/ 选项1
                    </Menu.Item>
                    <Menu.Item key=”users”>选项2</Menu.Item>
                    <Menu.Item key=”3″> 选项3 </Menu.Item>
                    <Menu.Item key=”4″> 选项4 </Menu.Item>
                </SubMenu>
                <SubMenu
                    key=”sub2″
                    title={
                        <span>
                            <Icon type=”appstore” />
                            <span> 导航二 </span>
                        </span>
                    }
                >
                    <Menu.Item key=”5″> 选项5 </Menu.Item>
                    <Menu.Item key=”6″> 选项6 </Menu.Item>
                    <SubMenu key=”sub3″ title=”三级导航”>
                        <Menu.Item key=”7″> 选项7 </Menu.Item>
                        <Menu.Item key=”8″> 选项8 </Menu.Item>
                    </SubMenu>
                </SubMenu>
                <SubMenu
                    key=”sub4″
                    title={
                        <span>
                            <Icon type=”setting” />
                            <span> 导航三 </span>
                        </span>
                    }
                >
                    <Menu.Item key=”9″> 选项9 </Menu.Item>
                    <Menu.Item key=”10″> 选项10 </Menu.Item>
                    <Menu.Item key=”11″> 选项11 </Menu.Item>
                    <Menu.Item key=”12″> 选项12 </Menu.Item>
                </SubMenu>
            </Menu>
        )
    },
})
// 定义了要输出的类 MenuList (这个要用于路由配置中)
export default class MenuList extends Component {
    render() {
        return (
            <div>
                {‘ ‘}
                // 这是body 下的 页面最外层 div
                <div id=”react-menu”>
                    {‘ ‘}
                    // 这是左侧菜单的最外层div
                    <div className=”logo”>Hell Logo</div>
                    <MenuListDom location={this.props.location} /> // 这里是 ant
                    UI组件显示的地方
                </div>
                <div id=”react-content”>
                    {‘ ‘}
                    // 显示区域
                    {this.props.children}
                </div>
                <div id=”react-top” /> // 顶部登录状态显示区域
            </div>
        )
    }
}

第二步:在 index.jsx 中配置路由
react 代码

// index.jsx 文件
import ‘../common/lib’
import ReactDOM from ‘react-dom’
import React from ‘react’
import MenuList from ‘../component/Menu’
import ‘../component/App.less’
import { Router, Route, Link, hashHistory, IndexRoute } from ‘react-router’
// 这里是需要显示的内容模板 About 和 Users
import { About } from ‘../component/master/About’
import { Users } from ‘../component/Users’
ReactDOM.render(
    <Router history={hashHistory}>
        <Route path=”/” component={MenuList}>
            <IndexRoute component={About} />
            <Route path=”about” component={About} />
            <Route path=”users” component={Users} />
        </Route>
    </Router>,
    document.getElementById(‘content’),
)

第三步:这次轮到 index.html 页面了
html 代码

<!DOCTYPE html>
<head>
    <meta charset=”utf-8″>
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
    <link rel=”stylesheet” type=”text/css” href=”./index.css” />
    <!–[if lt IE 10]>
<script src=”https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,es5-shim/4.5.7/es5-shim.min.js,es5-shim/4.5.7/es5-sham.min.js,html5shiv/3.7.2/html5shiv.min.js,media-match/2.0.2/media.match.min.js”></script>
<![endif]–>
    <style>
        #react-menu {
            width: 240px;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            background: #fff;
        }
        #react-top {
            height: 50px;
            position: absolute;
            left: 240px;
            top: 0;
            right: 0;
            background: #fff;
        }
        #react-content {
            position: absolute;
            top: 50px;
            left: 240px;
            bottom: 0;
            right: 0;
            padding: 20px 0 0 20px;
            background: rgb(234, 234, 241)
        }
    </style>
</head>
<body>
    <div id=”content”></div>
</body>
<script src=”./common.js”></script>
<script src=”./index.js”></script>
</html>

前端开发年终工作汇报范文 前端开发的工作名称 前端开发工作要求

» 本文来自:前端开发者 » 《前端框架react-router 实例》
» 本文链接地址:https://www.rokub.com/5857.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!