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

1. 新建一个文件夹routes/router
2. 在该文件夹下新建一个index.tsx文件
3. 明确react-router-dom的版本，每个版本写法有些不同(去package.json可看)

• 本次以v6演示

4. 新建一个变量来存储路由表的信息，以对象的形式保存在数组中
5. 默认暴露该变量
6. 示例：

   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: <Home />,
     },{
       path: '/comp', // 该路径为显示在浏览器地址栏上
       name: 'Comp',
       element: <Comp />, // 跳转的组件
     },{
       path: '/log',
       name: 'Log',
       element: <Log />,
     }]
   const router = createBrowserRouter(routes)
   export default routes

7. 在index.tsx页面中使用BrowserRouter标签包裹App组件
   • HashRouter 显示的路径 /#
   • BrowserRouter 显示的路径 /

• 示例：

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

8. 登录后进入系统后通过导航选择页面
9. 路由
   • 在页面或组件需要跳转路径时使用Link标签
   • to属性的地址与路由表上的path要一样
   • 示例：

     声明式导航
     import React from "react";
     import { memo } from "react"
     import { Link } from 'react-router-dom'
     const Comp = memo(() => {
     	return (<Link to={'/loginPage'}><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>
     	)
     })