创建一个React - Ant Design 项目

1. 创建一个空白项目

npx  create-react-app   项目名
    cd  项目名
    npm  start

2. 下载安装必需第三方模块

cd  项目名
    npm   i   antd                        //antd核心组件模块
    npm   i   @ant-design/icons            //antd提供的扩展图标模块
    npm   i   react-router-dom                //基于浏览器的React项目必需路由和导航模块
    npm   i   nprogress                    //第三方提供的页面顶部进度条组件

3. 创建必需的页面和组件

4.配置路由系统，给每个页面分配路由地址

src/index.js引入路由
import {createBrowserRouter,RouterProvider} from "react-router-dom";
const router = createBrowserRouter([
  // 创建一个基于浏览器的路由对象 Router > Routes >Route*N
  {
    path: "/",
    element: <div>Hello world!</div>,
  // 嵌套路由
    children: [
      {
        path: "contacts/:contactId",
        element: <Contact />,
      },
    ],
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

4.1 子路由引入Outlet

import { Outlet } from "react-router-dom";

export default function Root() {
  return (
    <>
      {/* all the other elements */}
      <div id="detail">
        <Outlet />
      </div>
    </>
  );
}