react-配置路由表

// 配置路由表 

// 路由懒加载
import { lazy} from "react";

// 引入vant icon 图标 
import { WapHomeO, QrInvalid, Down, CartO,  Contact} from '@react-vant/icons';

// 二级路由表
export let mainRouter = [{
        path: "/index/home",
        element: lazy(() => import('../page/index/Home')),
        title: "首页",
        icon: < WapHomeO />
    },
    {
        path: "/index/classify",
        element: lazy(() => import('../page/index/Classify')),
        title: "分类",
        icon: < QrInvalid />
    },
    {
        path: "/index/jingxi",
        element: lazy(() => import('../page/index/Jingxi')),
        title: "京喜",
        icon: < Down />
    },
    {
        path: "/index/shopcar",
        element: lazy(() => import('../page/index/Shop_Car')),
        title: "购物车",
        icon: < CartO />
    },
    {
        path: "/index/my",
        element: lazy(() => import('../page/index/My')),
        title: "我的",
        icon: < Contact />
    },
]

// 一级路由表
const routes = [{
        path: "/index",
        element: lazy(() => import('../page/Index')),
        children: mainRouter
    },
    {
        path: "/login",
        element: lazy(() => import('../page/Login'))
    },
    {
        path: "/details/:id",
        element: lazy(() => import('../page/Details'))
    },
    {
        path: "*",
        element: lazy(() => import('../page/Eorr404'))
    },
    {
        path: "/",
        to: "/index/home"
    }
]

// 抛出路由表
export default routes

  RouterView文件夹


          // 弱网提示
import React,{Suspense} from 'react'

import {BrowserRouter as Router,Routes,Route,Navigate} from 'react-router-dom'

import routes from './Router_conify'

const SusLoding = () =>{
    return <>加载中...</>
}
function RouterView() {
    // 定义一个函数路由表
    const renderRouter = (arr) =>{
        return arr.map((item,index)=>{
            return <Route key={index} path={item.path} element={item.element ? <item.element></item.element> : <Navigate to={item.to}></Navigate>}>
                {
                    item.children && renderRouter (item.children)
                }
            </Route>
        })
    }
  return (
    <Suspense fallback={<SusLoding />}>
        <Router>
            <Routes>
                {
                    renderRouter(routes)
                }
            </Routes>
        </Router>
    </Suspense>
  )
}

export default RouterView

index.jsx文件

import React from 'react'
import { Outlet, NavLink } from 'react-router-dom'
import { mainRouter } from '../router/Router_conify'
import {  Sticky,Tabbar } from 'react-vant'
import Footer from '../components/Footer'

function Index() {
  return (
    <div className='index'>
      {/* Index */}
      <Sticky>
      <header>
        头
      </header>
      </Sticky>
      <main>
        {/* 身 */}
        <Outlet></Outlet>
      </main>
      <footer>
        {/* 底部 */}
       <Footer></Footer>
      </footer>
    </div>
  )
}

export default Index



底部的tabvar


import React from 'react'
import { NavLink } from 'react-router-dom'
import { mainRouter } from '../router/Router_conify'
import {  Sticky,Tabbar } from 'react-vant'
function Footer() {
  return (
    <div>
        {/* Footer */}
        <div className='demo-tabbar'>
          <Tabbar>
            {
              mainRouter.map((item,index)=>{
                return <Tabbar.Item icon={item.icon} key={index}>
                  <NavLink to={item.path}>{item.title}</NavLink>
                </Tabbar.Item>
              })
            }
            
          </Tabbar>
        </div>
    </div>
  )
}

export default Footer