react-router-dom V6 使用

1、安装路由pnpm add react-router-dom

2、外层包裹

import { HashRouter,useRoutes } from "react-router-dom";
import routes from "@/router";

const element = useRoutes(routes);
  <HashRouter>
    {element}
  </HashRouter>

3、嵌套路由

import Home from "@/pages/Home";
import List from "@/pages/List";
import GoodsList from "@/pages/GoodsList";
import Index1 from "@/pages/index1";
import Index2 from "@/pages/index2";
import Index3 from "@/pages/index3";

const routes = [
  {
    path: "/",
    element: <Home />,
    children: [
      {
        path: "goodsList",
        element: <GoodsList />,
      },
      {
        path: "goodsList2",
        element: <>goodsList2</>,
      },
    ],
  },
  {
    path: "/index1",
    element: <Index1 />,
  },
  {
    path: "/index2",
    element: <Index2 />,
  },
  {
    path: "/index3",
    element: <Index3 />,
  },
];

export default routes;

---

## 子路由使用Outlet占位，navigate进行跳转,useSearchParams获取参数数据

import React from 'react'
import {
  Routes,
  Route,
  Link,
  useRoutes,
  Outlet,
  useNavigate,
  useSearchParams
} from 'react-router-dom' 
import GoodsList from '@/pages/GoodsList'
import routes from '@/router'
import styles from './index.module.scss'

export default function home() {
  const element = useRoutes(routes)
  let navigate = useNavigate()
  const [searchParams, setSearchParams] = useSearchParams()
    useEffect(() => {
    //使用 Array.from(searchParams.entries()) 将迭代器对象转换为数组，以便查看 URLSearchParams 中的参数和值
    const entriesArray = Array.from(searchParams.entries())
    console.log(entriesArray)
    /* 
    [
      [
          "id",
          "zzk"
      ],
      [
          "age",
          "25"
      ]
    ]
    */
    // Iterate through keys
    for (const key of searchParams.keys()) {
      console.log(key)
    }
  }, [])
  return (
    <div className={styles.homeBox}>
      <div className={styles.leftBox}>
        <Link to='/goodsList?id=zzk&age=25'>children中测试跳转1</Link>
        <button
          onClick={() =>
            navigate('/goodsList2', {
              search: '?id=1111&age=99'
            })
          }
        >
          替换到 home 页面
        </button>
        <Link to='/index3'>跳转到index3</Link>
      </div>
      <div>
        {/* 子路由将会显示在这里，用outlet占位 */}
        <Outlet />
      </div>
    </div>
  )
}