React使用Design的TabBar进行二级路由出口显示

React使用AntDesignMobileUI组件在Layuot页面组件中如何中使用 TabBar标签栏进行二级路由显示

• 1.TabBar中的key改为你的路由地址，需要提前配置好，在app.js中
• 2.引入OutTabBalet ,作为出口显示
• 3.使用TabBa的onChange，配合useNavigate进行页面跳转。

import React, { useState, useEffect } from 'react';
import { TabBar } from 'antd-mobile';
import './layout.scss';
import { useNavigate, Outlet, useLocation } from 'react-router-dom';
import {
    AppOutline,
    UnorderedListOutline,
    UserOutline,
} from 'antd-mobile-icons';

export default function Layout() {
    let [active, setActive] = useState('');
    let location = useLocation();
    let navigate = useNavigate();
    useEffect(() => {
        setActive(location.pathname);
    }, []);

    let tabs = [
        {
            key: '/Layout/Popular',
            title: '热映',
            icon: <AppOutline />,
        },
        {
            key: '/Layout/Cinema',
            title: '影院',
            icon: <UnorderedListOutline />,
        },
        {
            key: '/Layout/My',
            title: '我的',
            icon: <UserOutline />,
        },
    ];

    let setRouteActive = (value) => {
        navigate(value);
        setActive(value);
        console.log(value);
    };

    return (
        <div className="layout-page">
            <div className="page">
                <Outlet />
            </div>
            <TabBar onChange={setRouteActive} activeKey={active}  >
                {tabs.map(item => (
                    <TabBar.Item
                        key={item.key}
                        icon={item.icon}
                        title={item.title}
                    />
                ))}
            </TabBar>
        </div>
    );
}