react项目实战练习（巩固新学的知识以及遇到的问题）

1.路由的使用

首先安装 npm install react-router-dom --save-dev； 之后引入，引入的时候，发现跟我学习的资源上有些不同，作出了一些更新，导致会出现一些错误，下面就简单说一下今天的项目实战遇到的问题，还有一个没解决，找了很多资料，等后面解决了再来补充。

遇到的一些error

1.Matched leaf route at location "/Detail" does not have an element. This means it will render an with a null value by default resulting in an "empty" page.
报错为空页面，要写element,还有方式的改变，由原来的直接写组件变成了需要包裹写组件再写到花括号中。附上二者的对比：

           
            }/>

从前会遇到/detail的页面也显示list的内容的情况，需要用到switch，然而现在用Routes就不会产生该问题，不再需要Switch。这也是新版的一个优势

昨天有提到这个错误，但是因为初学，用的很少，所以印象不深刻，报错之后翻到了昨天的内容，一下就解决啦。感觉以后可以写个error集锦，专门用来查找一些自己容易犯的错误，方便快速解决，也希望留个印象更能少犯重复错误。

2. is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
一定要记得组件首字母必须大写，不然会报错.因为引用antd里面的List，重名了就改名成了PageList，但是P没有大写，就会报上述错误。

3.使用模板字符串要在外面加花括号

4.export 'Redirect' (imported as 'Redirect') was not found in 'react-router-dom'
也是一个版本问题，Redirect 变成了 Navigate

5.export 'withRouter' (imported as 'withRouter') was not found in 'react-router-dom' 

同上，withRouter换成了useNavigate

6.一个今天一天都未解决的问题

是个警告，虽然没有报错，但是页面不显示，是空白的

我在想是不是也是版本更新的原因，导致路由动态参数出问题？:id

 只要加上动态参数就会出现这种情况，希望能有大佬帮忙解惑~感激不尽

7. 下面的是我在用生命周期函数componentWillReceiveProps()时，飘过了一个警告，我就去了解了一下，原来是更新了，所以我们还是要不断地学习，才能少出bug啊！！我当时参考了这篇文章，希望对你们有帮助

React v15到v16.3, v16.4新生命周期总结以及使用场景_辰辰沉沉大辰沉的博客-CSDN博客_react v15