react ts react-router 6路由配置

创建一个router.tsx文件

// // 配置路由信息
import { BrowserRouter,HashRouter, Routes, Route,createBrowserRouter,useRoutes } from "react-router-dom";
import React,{useState,lazy,Component } from "react"
import { JSX } from 'react/jsx-runtime'
import Text from '@/pages/text/index';
// 懒加载模式需要使用loding
const Layout=lazy(()=>import("@/layout/index"))
const Home=lazy(()=>import("@/pages/home/index"))
const Page1=lazy(()=>import("@/pages/text/index"))const withLoading=(somp:JSX.Element)=>(<React.Suspense fallback={<div>Loding</div>}>{somp}</React.Suspense>
)interface rout{path:string,element:Component,children?:Array<any>
}const RourterData:Array<any>=[{path: '/',element:<Layout></Layout>,},{path: '/',element:<Layout></Layout>,children:[{path:'/page1',element:withLoading(<Page1></Page1>)}]},
]export default RourterData;

在APP.tsx中引入

import { useState,lazy } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import '@/App.css'
import {Button,ConfigProvider} from "antd"import renderRoutes from "@/router/index";
import { BrowserRouter,HashRouter, Routes, Route,createBrowserRouter,useRoutes } from "react-router-dom";import routes from "@/router/index"const Layout=import("@/layout/index")const Home=lazy(()=>import("@/pages/home/index"))function App() {const element = useRoutes(routes)return (<div>{element}</div>)
}export default App

最关键的地方main.tsx中

router6中必须要写再组件BrowserRouter中

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.scss'
// import RouterView from './router/index.ts'
import text from "@/pages/text"
import LayoutCommpont from "@/layout/index"
import { BrowserRouter,HashRouter, Routes, Route,createBrowserRouter,useRoutes } from "react-router-dom";// 关闭严格模式
ReactDOM.createRoot(document.getElementById('root')!).render(// <React.StrictMode>// <LayoutCommpont />// </React.StrictMode>,<BrowserRouter><App></App></BrowserRouter>)