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>
  
)

错误useRoutes() may be used only in the context of a ＜Router＞ component. _

就是需要再顶层也就是main.tsx文件中组件顶层加入BrowserRouter 组件才可以