加载中...
  • react-router v4 实现嵌套路由

    最近在学习react这个框架,昨天在子路由嵌套这里快要搞疯了,也有自己急于求成的缘故吧,在网上搜索了好的技术文章,整了一天,总算搞出来了。决定记录下来,下次可以看看

    首先我这里是打算用 官方脚手架跟 Antd UI框架搭建一个后台管理界面
    好了,上代码了

    我的项目结构是这样的
    RCXLu9.png

    App.js 文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    import React, {Component} from 'react';
    import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
    import Layout from './components/Layout';
    import Login from './components/Login';


    export default class CRouter extends Component {
    render() {
    return (
    <div>
    <Router>
    <Switch>
    <Route exact path='/' component={Login}/>
    <Route path='/app' component={Layout}/>
    <Route path='/login' component={Login}/>
    </Switch>
    </Router>
    </div>
    )
    }
    }

    然后的话就是一级登录页路由了 Login.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    /**
    * Created by wangqiangli on 2017/11/12.
    */
    import React from 'react';
    import { Button } from 'antd';

    class NormalLoginForm extends React.Component {
    handleSubmit (){
    this.props.history.push('/app/first');
    }
    render() {
    return (
    <div>
    <Button type="primary" onClick={this.handleSubmit.bind(this)} className="login-form-button">
    Log in
    </Button>
    </div>
    );
    }
    }

    export default NormalLoginForm;

    同样一级路由 Layout.js 这里的话是后台页面的主页,用来嵌套子路由

    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
    /**
    * Created by wangqiangli on 2017/11/12.
    */
    import React from 'react';
    import {Layout, Menu, Icon} from 'antd';
    import FirstPage from './FirstPage';
    import SecondPage from './SecondPage';
    import {Route, Link, Switch} from 'react-router-dom';

    const {Header, Sider, Content} = Layout;


    class SiderDemo extends React.Component {
    state = {
    collapsed: false,
    };
    toggle = () => {
    this.setState({
    collapsed: !this.state.collapsed,
    });
    }

    render() {
    return (
    <Layout>
    <Sider
    trigger={null}
    collapsible
    collapsed={this.state.collapsed}
    >
    <div className="logo"/>
    <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
    <Menu.Item key="1">
    <Icon type="user"/>
    <Link to={'/app/first'}>First</Link>
    </Menu.Item>
    <Menu.Item key="2">
    <Icon type="video-camera"/>
    <Link to={'/app/second'}>second</Link>
    </Menu.Item>
    </Menu>
    </Sider>
    <Layout>
    <Header style={{background: '#fff', padding: 0}}>
    <Icon
    className="trigger"
    type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
    onClick={this.toggle}
    />
    </Header>
    <Content style={{margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280}}>

    <Switch>
    <Route path="/app/first" component={FirstPage}/>
    <Route path="/app/second" component={SecondPage}/>
    </Switch>
    </Content>
    </Layout>
    </Layout>
    );
    }
    }

    export default SiderDemo;

    好了,然后就是子路由了 FirstPage.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    /**
    * Created by wangqiangli on 2017/11/12.
    */
    import React from 'react';

    class FirstPage extends React.Component {
    state = {
    collapsed: false,
    };
    toggle = () => {
    this.setState({
    collapsed: !this.state.collapsed,
    });
    }
    render() {
    return (
    <div>这是第一个页面</div>
    );
    }
    }

    export default FirstPage;

    子路由 SecondPage.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    /**
    * Created by wangqiangli on 2017/11/12.
    */
    import React from 'react';

    class SecondPage extends React.Component {
    state = {
    collapsed: false,
    };
    toggle = () => {
    this.setState({
    collapsed: !this.state.collapsed,
    });
    }
    render() {
    return (
    <div>这是第二个页面</div>
    );
    }
    }

    export default SecondPage;

    RCXOBR.png
    这样就可以了

    demo地址 https://gitee.com/wxialexiatian/summer__reactrouter4master

    借鉴自:https://www.cnblogs.com/fengly0503/p/7823167.html

    上一篇:
    uni-app permission 添加失败解决方案
    下一篇:
    react暴露webpack配置文件
    本文目录
    本文目录