antdesign - Antd Menu组件应该如何结合react-router Link组件?

问题描述

问 题

如题，在通过create-react-app脚手架搭建项目，antd作为UI部分的实现。
通过侧边栏导航Menu的Menu.Item控制Content部分的变化。

import React, {Component} from 'react';
import {
    BrowserRouter as Router,
    Route,
    Link
} from 'react-router-dom'
import FileSystem from './file_system/file_system';
import OverView from '../component/Overview/OverView';
import {Breadcrumb, Layout, Menu, Icon} from 'antd';
const {Content, Header, Footer, Sider} = Layout;

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

    onCollapse = (collapsed) => {
        console.log(collapsed);
        this.setState({collapsed});
    }

    render() {
        return (
            <Layout className="antd-wrap">
                <Sider
                    style={{background: '#fff'}}
                    breakpoint="lg"
                    width={200}
                    collapsible
                    collapsed={this.state.collapsed}
                    onCollapse={this.onCollapse}
                    collapsedWidth={64}
                    trigger={null}
                >
                    <div className="logo"/>

                    <Menu theme="light" defaultSelectedKeys={['1']} mode="inline">
                        <Menu.Item key="1" as={Link} to='/'>
                            <Icon type="pie-chart"/>
                            <span>概览</span>
                        </Menu.Item>
                        <Menu.Item key="2" as={Link} to="/filesystem">
                            <Icon type="desktop"/>
                            <span>文件系统</span>
                        </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: '0 16px'}}>
                        <Breadcrumb style={{margin: '12px 0'}}>
                            <Breadcrumb.Item>概览</Breadcrumb.Item>
                            <Breadcrumb.Item> </Breadcrumb.Item>
                        </Breadcrumb>
                        <div style={{background: '#fff', minHeight: 360, overflow: 'hidden'}}>
                            <Router>
                                <Route path="/" component={OverView}/>
                                <Route path="/filesystem" component={FileSystem}/>
                            </Router>
                        </div>
                    </Content>
                    <Footer style={{textAlign: 'center'}}>
                    </Footer>
                </Layout>
            </Layout>
        );
    }
}

export default AntdGrid

查阅了Menu组件应该如何结合react-router Link组件?

没有想通问题所在。

解决方案

<Menu.Item key="1">
    <Icon type="pie-chart"/>
    <Link to='/>概览</Link >
</Menu.Item>
<Menu.Item key="2">
    <Icon type="desktop"/>
    <Link to='/filesystem'>文件系统</Link >
</Menu.Item>

这篇关于antdesign - Antd Menu组件应该如何结合react-router Link组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！