React18路由V6，路由参数传递，路由的配置方式使用，页面的懒加载和suspense

路由参数传递

• 动态路由方式path="/detail/:id"

          {/* 映射关系：path => Component */}
          <Routes>
            <Route path="/category" element={<Category />}></Route>
            <Route path="/detail/:id" element={<Detail />}></Route>
            <Route path="*" element={<NotFound />}></Route>
          </Routes>

import React, { PureComponent } from "react";
import withRouter from "../hoc/with_router";
export class Category extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      list: [
        { id: 100, name: "zm", age: 18 },
        { id: 101, name: "cw", age: 21 },
        { id: 102, name: "dhs", age: 20 },
      ],
    };
  }
  goToDetail(id) {
    const { navigate } = this.props.router;
    //跳转详情页并传递参数
    navigate("/detail/" + id);
  }
  render() {
    const { list } = this.state;
    return (
      <div>
        <h2>Category Pages</h2>
        <ul>
          {list.map((item) => (
            <li onClick={(e) => this.goToDetail(item.id)} key={item.id}>
              {item.name}-{item.age}
            </li>
          ))}
        </ul>
      </div>
    );
  }
}
export default withRouter(Category);

                                     获取参数
import { useNavigate, useParams } from "react-router-dom";
function withRouter(OriginCpn) {
  return (props) => {
    const navigate = useNavigate();
    const params = useParams();
    const router = { navigate, params };
    return <OriginCpn {...props} router={router} />;
  };
}
export default withRouter;

                                    详情页接收参数
import React, { PureComponent } from "react";
import withRouter from "../hoc/with_router";
export class Detail extends PureComponent {
  render() {
    return (
      <div>
        <h2>Detail Pages</h2>
        <div>id:{this.props.router.params.id}</div>
      </div>
    );
  }
}
export default withRouter(Detail);

• search传递参数

useLocation()，useSearchParams()使用

import { useLocation, useNavigate, useParams, useSearchParams } from "react-router-dom";

// 高阶组件：函数
function withRouter(OriginCpn) {
  return (props) => {
    // 1.导航
    const navigate = useNavigate();

    // 2.动态路由的参数：/detail/:id
    const params = useParams();

    // 3.查询字符串参数：/user?name=zm&age=21
    const location = useLocation();
    console.log(location); //{pathname: '/user', search: '?name=zm&age=21', hash: '', state: null, key: 'nave19xy'}

    const [searchParams, setSearchParams] = useSearchParams();
    console.log(searchParams, setSearchParams);
    //  Object.fromEntries(searchParams) 和 Object.entries()相反，返回值是对象
    const query = Object.fromEntries(searchParams);

    // 获取参数
    console.log(searchParams.get("name"), searchParams.get("age")); //zm 21

    const router = { navigate, params, location, query };
    return <OriginCpn {...props} router={router} />;
  };
}
export default withRouter;

获取参数：

import React, { PureComponent } from "react";
import withRouter from "../hoc/with_router";
export class User extends PureComponent {
  render() {
    return (
      <div>
        <h2>
          User pages - {this.props.router.query.name}-{this.props.router.query.age}
        </h2>
      </div>
    );
  }
}
export default withRouter(User);

路由的配置方式使用

• useRoutes()

把这些路由通过配置生成

          <Routes>
            <Route path="/" element={<Navigate to="/home" />}></Route>
            <Route path="/home" element={<Home />}>
              {/* 嵌套路由 */}
              <Route path="/home" element={<HomeRecommend />}></Route>
              <Route path="/home/recommend" element={<HomeRecommend />}></Route>
              <Route path="/home/ranking" element={<HomeRanking />}></Route>
            </Route>
            <Route path="/about" element={<About />}></Route>
            <Route path="/login" element={<Login />}></Route>

            <Route path="/category" element={<Category />}></Route>
            <Route path="/order" element={<Order />}></Route>
            <Route path="/detail/:id" element={<Detail />}></Route>

            <Route path="/user" element={<User />}></Route>

            <Route path="*" element={<NotFound />}></Route>
          </Routes>

                                        App.jsx必须是函数组件
关键代码：
import { useRoutes } from "react-router-dom";
{useRoutes(routes)}

所有代码：
import React from "react";
import { NavLink, useNavigate, useRoutes } from "react-router-dom";
import "./style.css";
import routes from "./router";

export function App() {
  // hooks放置到顶层
  const navigate = useNavigate();
  function navigateTo(path) {
    navigate(path);
  }
  return (
    <div className="app">
      <div className="header">
        <span>Header</span>
        <div className="nav">
          <NavLink to="/home" className={({ isActive }) => (isActive ? "zmClass" : "")}>
            首页
          </NavLink>
          <NavLink to="/about" className={({ isActive }) => (isActive ? "zmClass" : "")}>
            关于
          </NavLink>
          <NavLink to="/login" className={({ isActive }) => (isActive ? "zmClass" : "")}>
            登录
          </NavLink>
          <button onClick={(e) => navigateTo("/order")}>订单</button>
          <button onClick={(e) => navigateTo("/category")}>分类</button>
          <NavLink to="/user?name=zm&age=21" className={({ isActive }) => (isActive ? "zmClass" : "")}>
            用户
          </NavLink>
        </div>
      </div>
      <div className="content">
        {/* 映射关系：path => Component */}
        {useRoutes(routes)}
      </div>
      <div className="footer">Footer</div>
    </div>
  );
}
export default App;

                                     router -> index.js
import { Navigate } from "react-router-dom";
import Home from "../pages/Home";
import About from "../pages/About";
import Login from "../pages/Login";
import NotFound from "../pages/NotFound";
import HomeRecommend from "../pages/HomeRecommend";
import HomeRanking from "../pages/HomeRanking";
import Category from "../pages/Category";
import Order from "../pages/Order";
import Detail from "../pages/Detail";
import User from "../pages/User";

const routes = [
  {
    path: "/",
    element: <Navigate to="/home" />,
  },
  {
    path: "/home",
    element: <Home />,
    children: [
      {
        path: "/home",
        element: <Navigate to="/home/recommend" />,
      },
      {
        path: "/home/recommend",
        element: <HomeRecommend />,
      },
      {
        path: "/home/ranking",
        element: <HomeRanking />,
      },
    ],
  },
  {
    path: "/about",
    element: <About />,
  },
  {
    path: "/login",
    element: <Login />,
  },
  {
    path: "/category",
    element: <Category />,
  },
  {
    path: "/order",
    element: <Order />,
  },
  {
    path: "/detail/:id",
    element: <Detail />,
  },
  {
    path: "/user",
    element: <User />,
  },
  {
    path: "*",
    element: <NotFound />,
  },
];
export default routes;

页面的懒加载和suspense

import { Navigate } from "react-router-dom";
import Home from "../pages/Home";
// import About from "../pages/About";
// import Login from "../pages/Login";
import NotFound from "../pages/NotFound";
import HomeRecommend from "../pages/HomeRecommend";
import HomeRanking from "../pages/HomeRanking";
import Category from "../pages/Category";
import Order from "../pages/Order";
import Detail from "../pages/Detail";
import User from "../pages/User";
import React from "react";

// 路由懒加载
const About = React.lazy(() => import("../pages/About"));
const Login = React.lazy(() => import("../pages/Login"));

import React, { Suspense } from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { HashRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <HashRouter>
      {/* 加载中... */}
    <Suspense fallback={<h3>Loading...</h3>}>
      <App />
    </Suspense>
  </HashRouter>
);