React二级配置路由

APP.jsx

import { HashRouter, Route, Routes } from "react-router-dom";
import React, { lazy, Suspense } from "react";
import "./App.css";

const Login = lazy(() => import("./views/login/LoginPage.jsx"));
const Layout = lazy(() => import("./views/layout/LayoutPage.jsx"));
const Hot = lazy(() => import("./views/hot/HotMovie.jsx"));
const Cinema = lazy(() => import("./views/cinema/CinemaPage.jsx"));
const Mine = lazy(() => import("./views/mine/MinePage.jsx"));
const City = lazy(() => import("./views/city/CityPage.jsx"));

function App() {
  return (
    <HashRouter>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path="/" element={<Login />} />
          <Route path="/login" element={<Login />} />
          <Route path="/layout" element={<Layout />}>
            <Route path="hot" element={<Hot />} />
            <Route path="cinema" element={<Cinema />} />
            <Route path="mine" element={<Mine />} />
          </Route>
          <Route path="/city" element={<City />} />
        </Routes>
      </Suspense>
    </HashRouter>
  );
}

export default App;

Layout.jsx

import React, { useState } from 'react'
import { Tabs, TabBar } from 'antd-mobile'
import './LayoutPage.scss'

import {
    Outlet,
    useLocation,
    useNavigate,
    MemoryRouter as Router,
} from 'react-router-dom'
import {
    MovieOutline,
    VideoOutline,
    UserOutline,
} from 'antd-mobile-icons'

export default function LayoutPage() {
    const navigate = useNavigate()
    const location = useLocation()
    const { pathname } = location

    const setRouteActive = (value) => {
        navigate(value)
    }
    const tabs = [
        {
            key: '/layout/hot',
            title: '热映',
            icon: <MovieOutline />,
        },
        {
            key: '/layout/cinema',
            title: '影院',
            icon: <VideoOutline />,
        },
        {
            key: '/layout/mine',
            title: '我的',
            icon: <UserOutline />,
        },
    ]
    return (
        <div className='layout'>
            {/* 顶部信息 */}
            <div className='layout_top'>
                {/* 二级路由出口 */}
                <Outlet />
            </div>
            {/* 底部导航 */}
            <div className='layout_bottom'>
                <TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
                    {tabs.map(item => (
                        <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                    ))}
                </TabBar>
            </div>
        </div>
    )

}