react-router 实例

来源：互联网发布：成都买车位划算知乎编辑：程序博客网时间：2024/06/03 20:33

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

第一步：先从 ant.design 中选择了一个 MENU 的组件，用来配合 router 使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
// 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> // 顶部登录状态显示区域
            </div>
        );
    }
};

第二步：在 index.jsx 中配置路由

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 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 页面了

13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
            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>

第四步：看下效果

阅读全文

0 0