新版本react＞18,react-router-dom＞6和flask使用时的一些坑。

react 18. 2.0   react-router-dom 6.3.0  下的一些问题：

1.建议高版本之后使用函数类型组件 而不是用class类型的组件。

因为usenavigate 这种hook的东西 在class里不好用。

在函数类型组件 OK。例如：

import { useNavigate } from 'react-router-dom'

const navigate = useNavigate();

const backtoworkbench = () => {
    navigate("/workbench")
};

2.用了函数类型组件后的坑：

this.state 不能直接用 ，如果用可能可能需要bind(this)，但是想修改数据还是要放到usestate里的。

我直接用use State from‘react’ ，例如：

const isshow = true
const [getisshow,setishow] = useState(isshow)
    
const clickaddapp = () => {
    console.log(getisshow)
    setishow(getisshow => getisshow=false)
}

useState 有时候出现循环调用的问题，需要规避。 

3.python 用 flask 启动项目的坑：

刷新当前路由页面直接进404,需要python此方法发现404后,重新render一遍 index.html。

例如：

#刷新当前页面如果不在 默认路径会出现404,此方法就是发现404后,重新回到入口文件
@app.errorhandler(404)
def page_not_found(error):
    return render_template('index.html')

4.性能优化：

key + usememo + useEffect 配合来使用

5.python flask +react 启动：

原理：run build 打包成文件，其中index.html放到templates文件夹内，其他静态资源放到static文件夹内。然后再python APP.py 就成功运行了。

移动文件配置代码如下：