搭建项目react

建项目

react脚手架

npm create react-app 项目名称

下包

npm i react-router-dom 

搭建路由

import { HashRouter, Route, Navigate, Routes } from 'react-router-dom';
import { lazy } from 'react';



let arr = [
    {
        path: "/",
        to: '/home'
    },
    {
        path: '/home',
        element: lazy(() => import('../view/Home/index'))
    },
    {
        path: '/tq',
        element: lazy(() => import('../view/Tq/index'))
    }
]
// //定义组件
const Router = () => {
    return (
        <HashRouter>
            <Routes>
                {
                    arr.map((item, index) => {
                        return (
                           <Route key={index} path={item.path} element={item.element ? <item.element></item.element> : <Navigate to={item.to}></Navigate>}>

                           </Route>
                        )
                    })
                }
            </Routes>
        </HashRouter>
    )
}

// //导出组件

export default Router;

引入

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import Router from './router/routerConfig';
import './font/iconfont.css'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Router>
    <App />
    </Router>

);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))

建页面以及封装axios

import axios from 'axios';

axios.defaults.baseURL= 'http://localhost:3002';

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });
  export default axios;