"dev": "vite --host --port 3955 --open",

样式初始化

//
npm i reset-css

路由声明的方式

传统路由声明

import { BrowserRouter, HashRouter, Routes, Route } from 'react-router-dom'

const baseRouter = () => (<BrowserRouter>
    <Routes  >
        <Route path="/" element={<App ></App>} >
            <Route path="/home" element={<Home />}></Route>
            <Route path="/about" element={<About />}></Route>
        </Route>
    </Routes>
</BrowserRouter>)
export default baseRouter

对象路由声明方式

react-redux

//创建一个状态

const defaultState={
    num:20
}

let reducer=(state=defaultState,)=>{
    let newState= JSON.parse(JSON.stringify(state))
    return newState


}

export default reducer

初始化一个react-redux

import { legacy_createStore } from "redux";
import  reducer  from './reducer';
const store=legacy_createStore(reducer)
export default store

绑定一个状态

//状态管理
import {Provider} from "react-redux"
import store from '@/store/index'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  // 严格模式}}
  /* <React.StrictMode> */
  /* 新对象方式引入路由 */
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>
  /* 传统方式 */
  /* <Router></Router> */

  /* </React.StrictMode> */
)

在组件中获取这个状态

import {useSelector} from 'react-redux'
const {num} = useSelector(state=>{
        return { num:state.num}
})

在组建修改状态

  const dispatch = useDispatch()
  //  dispatch({type:"add4"})
  const clickHome = () => {
    dispatch({ type: "add4", val: 10 })
  }
  return (

    <div className="layout-container" onClick={clickHome}>  home  {num}</div>

  );

处理react-redux异步问题

安装redux-thunk

npm i redux-thunk

更换插件