Skip to content

Instantly share code, notes, and snippets.

@VesperDev

VesperDev/RouterApp.js

Last active July 14, 2024 11:50
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save VesperDev/e233115469a6c53bb96443f66385aa22 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save VesperDev/e233115469a6c53bb96443f66385aa22 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. VesperDev revised this gist Jun 1, 2018. 1 changed file with 2 additions and 3 deletions.
    5 changes: 2 additions & 3 deletions RouterApp.js
    View file
    Original file line number Diff line number Diff line change
    @@ -37,12 +37,12 @@ class RouterApp extends Component {
    <Menu.Item key="1">
    <Icon type="pie-chart" />
    <span>Deshboard</span>
    <Link to="/">Dashboard</Link>
    <Link to="/" />
    </Menu.Item>
    <Menu.Item key="2">
    <Icon type="desktop" />
    <span>Meseros</span>
    <Link to="/meseros">Meseros</Link>
    <Link to="/meseros" />
    </Menu.Item>
    </Menu>
    </Sider>
    @@ -56,7 +56,6 @@ class RouterApp extends Component {
    />
    </Header>
    <Content style={{ margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280 }}>
    {/* Content */}
    <Route exact path="/" component={Dashboard} />
    <Route path="/meseros" component={Meseros} />
    </Content>
  2. VesperDev created this gist Jun 1, 2018.
    75 changes: 75 additions & 0 deletions RouterApp.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,75 @@
    import React, { Component } from 'react';
    import { BrowserRouter as Router, Route, Link } from "react-router-dom";
    import { Layout, Menu, Icon } from 'antd';

    import Dashboard from './containers/Dashboard/Dashboard';
    import Meseros from './containers/Meseros/Meseros';

    const { Header, Content, Footer, Sider } = Layout;
    const SubMenu = Menu.SubMenu;

    class RouterApp extends Component {

    state = {
    collapsed: false,
    };

    onCollapse = (collapsed) => {
    this.setState({ collapsed });
    }
    toggle = () => {
    this.setState({
    collapsed: !this.state.collapsed,
    });
    }

    render() {
    return (
    <Router>
    <Layout style={{ minHeight: '100vh' }}>

    <Sider
    collapsible
    collapsed={this.state.collapsed}
    onCollapse={this.onCollapse}>
    <div className="logo" />
    <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
    <Menu.Item key="1">
    <Icon type="pie-chart" />
    <span>Deshboard</span>
    <Link to="/">Dashboard</Link>
    </Menu.Item>
    <Menu.Item key="2">
    <Icon type="desktop" />
    <span>Meseros</span>
    <Link to="/meseros">Meseros</Link>
    </Menu.Item>
    </Menu>
    </Sider>
    <Layout>
    <Header style={{ background: '#fff', padding: 0, paddingLeft: 16 }}>
    <Icon
    className="trigger"
    type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
    style={{ cursor: 'pointer' }}
    onClick={this.toggle}
    />
    </Header>
    <Content style={{ margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280 }}>
    {/* Content */}
    <Route exact path="/" component={Dashboard} />
    <Route path="/meseros" component={Meseros} />
    </Content>
    <Footer style={{ textAlign: 'center' }}>
    Ant Design ©2016 Created by Ant UED
    </Footer>
    </Layout>

    </Layout>
    </Router>
    );
    }
    }


    export default RouterApp;