【六】从零搭建react-新实现菜单和路由统一管理

kn
2022-02-21 15:30:01
react

1.新建config目录和menuList.js

import {
    HomeOutlined,
    ShopOutlined,
} from '@ant-design/icons';

import Home from 'pages/home/home'
import ArticleList from "pages/article/article";

const menuList =
    [
        // 菜单相关路由
        //key给路由用，route给菜单用
        { title: "首页", key: "app/home", route: "/app/home", icon: < HomeOutlined />, component: <Home/> },
        { title: "文章管理", key: "app/articleCategory", icon: < ShopOutlined />,
            subs: [
                { title: "文章管理", key: "app/article", route: "/app/article",  component: <ArticleList/> },
                { title: "分类管理", key: "app/category", route: "/app/category",  component: <ArticleList/> },
            ],
        }
    ];

export default menuList;

2.修改router.js

import React from 'react'
import { HashRouter, Routes, Route, Navigate } from 'react-router-dom'
import Login from 'pages/login/login'
import AppPage from 'pages/app/app'

import menuList from 'config/menuList'

function RequireAuth({ children }) {
    const authed = localStorage.getItem('isLogin')
    return authed === 'true' ? ( // 判断 localstorage 中登录状态是否为 true
        children
    ) : (
        <Navigate to="/" replace /> // 跳转到登录
    );
}

function RouterDom() {
    return (
        <HashRouter>
            <Routes>
                <Route path="/" element={<Login/>} />
                <Route path="/*" element={<RequireAuth><AppPage/></RequireAuth>} >
                    {menuList.map((item, index )=> {
                        var routers = [];
                        if(item.component){
                            routers.push(<Route key={index} path={item.key} element={item.component}/>)
                        }
                        if (item.subs) {
                            item.subs.map((item2, index2 ) => {
                                routers.push(<Route key={index2} path={item2.key} element={item2.component}/>)
                            })
                        }
                        return routers
                    })}
                </Route>
            </Routes>
        </HashRouter>
    );
}
export default RouterDom

3.修改siderdom.js

// import React, { useState, useEffect } from 'react'
import React, { useState } from 'react'
import { Layout } from 'antd';
import { Menu } from 'antd';
import { Link } from 'react-router-dom'
import menuList from 'config/menuList'

const { Sider } = Layout;
const { SubMenu } = Menu;

function SiderDom(props) {
    const [selectedKeys, setSelectedKeys] = useState(['home'])
    const [openKeys, setOpenKeys] = useState(['home'])
    const { collapsed } = props
    const MenuOnOpenChange = (openKeys) => {
        let newOpenKeys = openKeys.pop()
        setOpenKeys([newOpenKeys])
    }

    const MenuOnSelect = (e) => {
        setSelectedKeys([e.key])
    }

    // useEffect(() => {
    //     let url = window.location.hash
    //     let urlList = url.split('/')
    //     setOpenKeys([urlList[2]])
    //     setSelectedKeys([urlList[3]])
    // }, [window.location.hash])

    return (
        <Sider trigger={null} collapsible collapsed={collapsed}>
            <Menu
                selectedKeys={selectedKeys}
                openKeys={openKeys}
                mode="inline"
                theme="dark"
                onOpenChange={(openKeys) => MenuOnOpenChange(openKeys)}
                onSelect={(e) => MenuOnSelect(e)}
            >
                {menuList.map(item => {
                    if (item.subs) {
                        return (
                            <SubMenu
                                key={item.key}
                                icon={item.icon}
                                title={item.title}
                            >
                                {
                                    item.subs.map(item2 => (
                                        <Menu.Item key={item2.key}>
                                            <Link to={item2.route}>{item2.title}</Link>
                                        </Menu.Item>
                                    ))
                                }
                            </SubMenu>
                        )
                    }
                    else {
                        return (
                            <Menu.Item key={item.key} icon={item.icon}>
                                <Link to={item.route}>{item.title}</Link>
                            </Menu.Item>
                        )
                    }
                })}
            </Menu>
        </Sider>
    )
}


export default SiderDom

4.page下的app.js，去掉了navdom的显示改到每个页面中

import React, { useState, useCallback } from 'react'
import { Outlet } from 'react-router-dom'
import { Layout } from 'antd';
import SiderDom from '../common/SiderDom/SiderDom'
import HeaderDom from '../common/HeaderDom/HeaderDom'
// import loadable from '../common/Loadable/Loadable';

import './app.less'

const { Content } = Layout;
// 异步加载组件,按需加载
// const Home = loadable(() => import('pages/home/home'));


function App() {
    const [collapsed, setCollapsed] = useState(false)

    const toggle = useCallback(() => {
        setCollapsed(!collapsed)
    });

    return (
        <div className="app">
            <Layout className="app-layout">
                <SiderDom collapsed={collapsed} />
                <Layout className="site-layout">
                    <HeaderDom toggle={toggle} />
                    <Content className="site-layout-content">
                        <Outlet />
                    </Content>
                </Layout>
            </Layout>
        </div>
    )

}
export default App

5.navdom.js 调整写法，通过页面传值

import React from 'react'
import { Breadcrumb } from 'antd';
import { Link } from 'react-router-dom'
import './NavDom.less'
function NavDom(props) {
    const { breads } = props;
    console.log(breads)

    return (
        <div className="NavDom">
            <Breadcrumb>
                <Breadcrumb.Item>
                    <Link to="/app/home">首页</Link>
                </Breadcrumb.Item>
                {breads?.map((bread, i) => (
                    <Breadcrumb.Item key={i}>{bread}</Breadcrumb.Item>
                ))}
                {/*
                <Breadcrumb.Item>
                <a href="">Application Center</a>
                </Breadcrumb.Item>
                <Breadcrumb.Item>
                <a href="">Application List</a>
                </Breadcrumb.Item>
                <Breadcrumb.Item>An Application</Breadcrumb.Item> */}
            </Breadcrumb>
        </div>
    )
}
export default NavDom

6.在article中赋值