react项目初始化

路由

创建路由

import { createBrowserRouter } from "react-router-dom";
//路由懒加载
import React from "react";
const Home = React.lazy(() => import("@/pages/home/home"));

const routes = createBrowserRouter([
  
  {
    path: "/login",
    Component: Login,
  },
  {
    path: "/home",
    Component: Home,
    children: [
      {
        path: "statistic",
        Component: Statistic,
      },
      {
        path: "info",
        Component: Info,
      },
      {
        path: "data",
        Component: Data,
      },
    ],
  },
]);

一级路由使用

root.render(
  <React.StrictMode>
    <RouterProvider router={router}>
      <App />
    </RouterProvider>
  </React.StrictMode>
);

 二级路由使用

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

<Content>
    <Outlet></Outlet>
</Content>

路由重定向

const Redirect = () => {
  return <Navigate to="/login" />;
};
const routes = createBrowserRouter([
  {
    path: "/",
    Component: Redirect,
  },
  ...
]

路由跳转

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

function Home(){
    //要写在函数组件里面
    const navigate = useNavigate();
    const changOptions = (params) => {
        console.log(params);
        navigate(`/home/${params.key}`);
    };
}

redux

安装 redux react-redux

创建action和对应的reducer

export function changeInfoAction(type, val) {
  return {
    type: type,
    val: val,
  };
}

let infoState = {
  name: "admin",
  age: 18,
  last_login: "2025-01-18",
};

export default function infoReducer(state = infoState, action) {

  switch (action.type) {
    case "name":
      return { ...state, name: action.val };
    case "age":
      return { ...state, age: action.val };
    case "last_login":
      return { ...state, last_login: action.val };
    default:
      return state;
  }
}

合并reducer创建store

import { createStore, combineReducers } from "redux";
import infoReducer from "./reducers/infoReducer";

import dataReducer from "./reducers/dataReducer";
const rootReducer = combineReducers({
  info: infoReducer,
  data: dataReducer,
});

const store = createStore(rootReducer);

export default store;

使用store和useSelecter

导入

import { Provider } from 'react-redux';  // 导入 Provider
import store from "./store";
root.render(
  <Provider store={store}>
    <RouterProvider router={router}>
      <App />
    </RouterProvider>
  </Provider>
);

const name = useSelector((state) => state.info.name);
const dispatch = useDispatch();
const changeName = () => {
   dispatch(changeInfoAction("name", "hyw"));
  };

antd使用

form组件

item中只能有一个根元素,否则会报错或获取不到值

<Form.Item name="username">
    <div className="relative">
        <UserOutlined className="absolute h-full left-2 z-10 " />
        <Input className="pl-8 " />
    </div>
</Form.Item>