React-创建路由统一管理配置

1. 新建一个文件夹routes/router, 并在该文件夹下新建一个index.tsx文件

2. 明确react-router-dom的版本，每个版本写法有些不同(去package.json可看)

   • 本次以v6演示

3. 创建一个路由变量来存储路由表的信息，以对象的形式保存在数组中

4. 创建一个路由器,然后把路由变量传递给该路由器

   • createHashRouter(): 显示的路径 /#
   • createBrowserRouter(): 显示的路径 /

5. 默认暴露该路由器

   // routes/router/index.tsx
   import React from "react"
   import Home from "../src/home/index" // 引入组件
   import Comp from "@/comp"
   import Log from "@/log"
   import { Navigate } from "react-router-dom"
   import { createBrowserRouter } from 'react-router-dom'
   
   const routes = [ // 存放路由表信息的变量
     {
       path: '',	// 当路径没有带 / 默认页一般右登录放登录
       element: <Login />,
     },{
       path: '/comp', // 该路径为显示在浏览器地址栏上
       name: 'Comp',
       element: <Comp />, // 跳转的组件
     },{
       path: '/log/:name', // useParams方式,匹配在/log/下的任意页面
       name: 'Log',
       element: <Log />,
     }]
     // 创建一个BrowserRouter
   const router = createBrowserRouter(routes) 
   export default router

6. 在index.tsx页面中使用RouterProvider 来接受路由,进入默认第一个页面是路由配置表路径为空的那个页面

   // index.tsx
   import React from "react"
   import { createRoot } from 'react-dom/client'
   import { RouterProvider } from "react-router-dom" // 接收路由
   import './index.scss'
   
   const container = document.getElementById("root") as HTMLElement
   const root = createRoot(container);
   root.render(
     <React.StrictMode>
       <RouterProvider router={router} />
     </React.StrictMode>
   )

7. 登录后进入系统后通过导航选择页面

8. 路由

   • 声明式导航: 在组件需要跳转路径时使用Link标签, to的路径与路由表上的path(除params)要一样

     import React from "react";
     import { memo } from "react"
     import { Link } from 'react-router-dom'
     const Comp = memo(() => {
       return (<Link to={'/log/aaa'}>
         <UnlockOutlined style={{ fontSize: '1.2em'}} className="mr-4"/>
         {item.name}
       </Link>)
     })

   • 编程式导航: 需要通过条件判断在函数中导航

     import React from "react";
     import { memo } from "react"
     import { useNavigate } from 'react-router-dom';
     
     const Comp = memo(() => {
       const navigate = useNavigate();
       return(
         <div onClick={()=> navigate('/loginPage')}>
           跳转loginPage
         </div>
       )
     })