react脚手架使用、setupProxy配置代理、react-router-dom更新版本后的区别

步骤：

// 1
npm install -g create-react-app
// 2
create-react-app 项目名称
// 3
cd 项目名称
// 4
npm start

setupProxy 配置代理：

// 1
npm install http-proxy-middleware
// 2
const { createProxyMiddleware } = require('http-proxy-middleware')
// 3
module.exports = function(app) {
    app.use(
        createProxyMiddleware('/api' , {
            target: '接口基地址',
            changeOrigin: true,
            pathRewrite: {"^/api" : ""}
        })
    )
}

/*
提一句esModule和commonJS的面试题
1、commonJS 导入导出语法为 require 和 exports , esModule的导入导出语法为 import 和 export
2、两者的this指向， commonJS 的this指向为 自身模块， esModule 的this 指向为 undefined
3、commonJS在运行时加载, esModule 在编译的时候加载
4、commonJS导出拷贝的值，内部改变不会改变外部， esModule 导出的是引用
*/

react-router-dom更新版本后的区别:

// 6 版本
import { NavLink, Route, Routes } from 'react-router-dom'

<NavLink to={'/Home'}>Home</NavLink>

<Routes>
    <Route path='/Home' element={<Home />}></Route>
</Routes>


// 5 版本
import { NavLink , Route , Switch, Redirect } from 'react-router-dom'

<NavLink to={'/Home'}>Home</NavLink>

<Switch>
  <Route path="/Home" component={Home}></Route>
  <Redirect to="/Home"/>
</Switch>

// 6版本已经弃用Switch 等 ，使用会报错
// export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' ，component也改为element