React之路由
React之路由
背景： react: 18.2.0 路由：react-router-dom: 6.14.2
1、路由表配置
src下新建router/index.ts
import React, { lazy } from 'react'
import { Navigate } from 'react-router-dom'
import Layout from '@/layout/Index'
import { JSX } from 'react/jsx-runtime'// 路由懒加载
const Home = lazy(() => import('@/views/Home'))
const About = lazy(() => import('@/views/About'))
const Error404 = lazy(() => import('@/views/Error/404'))// 封装加载异步组件
const withLoadingComponent = (comp: JSX.Element) => (<React.Suspense fallback={<div>loading</div>}>{comp}</React.Suspense>
)// 1 根据接口数据动态生成路由对象
// 2 根据路由对象 动态生成菜单列表
const routes = [{path: '/',element: <Navigate to="/home" />},{path: '/',element: <Layout />,children: [{path: '/home',element: withLoadingComponent(<Home />),meta: {title: '首页'}},{path: '/about',element: withLoadingComponent(<About />),meta: {title: '关于作者'}}]},// 用户随便输入一个未处理的路径，重定向到404{path: '*',element: withLoadingComponent(<Error404 />)}
]export default routes
注意：
- 路由重定向需要使用
Navigate组件对象，如：<Navigate to="/home" /> - 路由懒加载需要使用react中的
lazy函数，如：lazy(() => import('@/views/Home'))， 不过，所有懒加载的组件都必须被自定义加载loading高级组件包裹
// 自定义加载动画高级组件
const withLoadingComponent = (comp: JSX.Element) => (<React.Suspense fallback={<div>loading</div>}>{comp}</React.Suspense>
)
// 包裹懒加载组件
element: withLoadingComponent(<Home />),
2、在项目入口文件注入router
import ReactDOM from 'react-dom/client'
// UI css
// antd v5 自带的重置样式
import 'antd/dist/reset.css'
// 导入路由模式
import { BrowserRouter } from 'react-router-dom'
import App from './App.tsx'ReactDOM.createRoot(document.getElementById('root')!).render(<BrowserRouter><App /></BrowserRouter>
)
3、在跟组件App.tsx下面，使用useRoutes构建路由占位符
// 路由配置对象
import routes from './router' // .router/index.tsx
import { useRoutes } from 'react-router-dom'
function App() {// 模拟路由中的<Outlet /> 组件const outlet = useRoutes(routes)return <>{outlet}</>
}export default App
4、编程式路由导航
import { useNavigate } from 'react-router-dom'
const navigate = useNavigate()
navigate(‘路径’)
5、组件路由导航
import { Link } from 'react-router-dom'
<Link to={'路径'}>Back Home</Link>