react初学者的填坑之路

1、创建项目报错

错误信息：

create-react-app : 无法加载文件 C:\Users\issuser\AppData\Roaming\npm\create-react-app.ps1，因为在此系统上禁止运行脚本。

解决方法：
https://www.cnblogs.com/yaotuo/p/12240019.html

2、react-router-dom版本V6新变化导致的问题

• 1、route的写法不一样了

// V5
<Switch>
    <Route exact path="/" component={Home} />
    <Route path="/profile" component={Profile} />
</Switch>

// V6
<Routes>
  <Route path="/" element={<Home />} />
  <Route path="profile/*" element={<Profile/>} />
</Routes>

• 2、js跳转路由的写法问题

// V5
// 在路由组件中直接使用
this.props.history.push('/login')
// 在一般组件中 引入withRouter ，使用
import { withRouter  } from 'react-router-dom'
class Index extends Component {
	render ()
}
export default withRouter (Index)
this.props.history.push('/login')

// V6
// this.props中没有了history对象；
// withRouter 也去掉了，用不了
// 改为了useNavigate方法，但是组件必须是 在function组件中使用;在class组件不起作用
export default function Index () {
	 let navigate = useNavigate();
	 function handleClick() {
	      navigate('/login');
	  };
	  return (
	      <div>
	          <button onClick={handleClick}>跳转到登录页面</button>
	      </div>
	  );
}

• 3、class组件中如果想要使用useNavigate，需要借助function组件加工一下，处理方法：

// 1.局部处理： 部分组件的function化处理
// 如此页面中仅仅某个按钮想要实现跳转，只需要把这个按钮做成一个function组件再使用，例如
function MyButton() {
    let navigate = useNavigate();
    function handleClick() {
        navigate('/login');
    };
    return <button onClick={handleClick}>跳转到login</button>;
};

class Register extends Component {
    render() {
        return (
            <div>
            	{/*  在class组件中这里想要做一个点击跳转，需要封装一个function组件引入进来 */}
                    <MyButton />
            </div>
        );
    }
}

// 2.全局处理：整体组件的处理
// 由于v6中的useNavigate无法在类组件中使用，故需要把原来的类组件包括在一个函数组件中，通过function组件把useNavigate传递给class组件使用
// 如果某个页面中很多地方需要跳转，这时候就可以使用此方法进行处理

class Register extends Component {
    render() {
        const { navigate } = this.props
        const toLogin = () => {
            navigate('/login')
        }
        return (
            <div>
                    <button onClick={toLogin}>跳转到登录</button>
            </div>
        );
    }
}

// 由于v6中的useNavigate无法在类组件中使用，故需要把原来的类组件包括在一个函数组件中，通过function组件把useNavigate传递给class组件使用，如：
function RegisterWrap (props) {
    const navigate = useNavigate();
    return <Register {...props} navigate={navigate} />;
}

export default RegisterWrap;

• 4、重定向问题
  V5的Redirect去掉了，新引入了Navigate

// V5
import {Redirect } from "react-router-dom";
<Redirect to="/home" />
或者：<Route path='/' render={() => (<Redirect to="/home"/>)}  />
// V6
import {Navigate} from "react-router-dom";
<Route path="/" element={<Navigate to ="/home" />} />
// 如下完整代码
 <Routes>
    <Route path='/home' element={<Home />} />
     {/*重定向*/}
     <Route path="/" element={<Navigate to ="/home" replace />}/>
     {/*404*/}
     <Route path="*" element={<NotFound />}/>
 </Routes>

• 5、404

// 404
<Route path="*" element={<NotFound />}/>

• 6、获取pathname、state等参数的方法

import { useNavigate, useLocation, useParams } from "react-router-dom";

	// 获取参数
	// let params = useParams()
    // let data=params.get('参数名')

	// 获取pathname
    let location = useLocation()
    console.log(location)
    const { pathname } = location
    console.log('pathname', pathname)

	// 获取state
	let location = useLocation()
    console.log(location)
    const { state} = location
    console.log('state', state)

3、react本地代理配置

【1】方法一
如果只是一个接口域名，只想简单的配置一下，可以这样配置：
在package.json配置：

  "proxy": "http://127.0.0.1:3003/",
  "devDependencies": {
  }

【2】方法二
如果有多种域名的接口，可以这样配置

使用http-proxy-middleware插件去配置

• 1、安装http-proxy-middleware

 npm install --save-dev http-proxy-middleware

• 2、创建setupProxy.js文件
  必须创建在src目录下，代码：
  注意：这里有一个网上流传的老版本写法，是会导致页面访问不到的，现在都要用新版本写法
  【1】新版本写法

// 新版本的写法
const { createProxyMiddleware } = require("http-proxy-middleware")
module.exports = function (app) {
    app.use(
        "/api",
        createProxyMiddleware({
            target: "http://localhost:3003", // 配置转发目标地址(能返回数据的服务器地址)
            changeOrigin: true, // 控制服务器接收到的请求头中host字段的值
            /*
                    changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
                    changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000
                    changeOrigin默认值为false，但我们一般将changeOrigin值设为true
              */
            pathRewrite: {
             "^/api": "" 
             }, // 去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置)；
        })
    )
}

【2】老版本写法已废弃，会导致页面访问报错

// 老版本写法
const proxy = require('http-proxy-middleware')

module.exports = function (app) {
    app.use(
        proxy('/api', {  // 遇见/api前缀的请求会触发该代理配置
            target: 'http://localhost:3003',  // 请求转发给谁
            changeOrigin: true,  // 默认值 false  控制服务器收到的响应头中host字段的值 加上req.HOST值localhost:5001 不加是localhost:3000  最好加上
            pathRewrite: {  // 重写请求路径 不加是 /api/students 加上是 /students
                '^/api': ''
            }
        }),
        proxy('/api2', {  // 遇见/api前缀的请求会触发该代理配置
            target: 'http://localhost:3004',  // 请求转发给谁
            changeOrigin: true,  // 默认值 false  控制服务器收到的响应头中host字段的值 加上req.HOST值localhost:5001 不加是localhost:3000  最好加上
            pathRewrite: {  // 重写请求路径 不加是 /api/students 加上是 /students
                '^/api2': ''
            }
        })
    )
}

3、antd使用问题

• 1、样式重置

.pagnination {
  :global {
    .ant-pagination-item {
      background-color: #f0f !important;
    }
  }
}

• 2、切换为中文

// 在需要用到的 组件文件中引入中文语言包
import zhCN from 'antd/es/locale/zh_CN'; 
// 引入国际化配置
import { ConfigProvider,Table } from 'antd';

  <ConfigProvider locale={zhCN}>
    <App />
  </ConfigProvider>