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 组件才可以
原文地址:https://blog.csdn.net/u010843503/article/details/137863655
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!