ReactJS页面应使用函数组件还是类组件？React Router v6路由空白求解

代码错误原因 #

你的写法存在版本API适配错误，和是否使用类组件无关：
React Router v6 已经完全废弃了 <Route> 组件的 component、render 属性，所有路由对应的组件都需要通过 element 属性传递，直接传入JSX实例即可，和你根路由 / 的写法保持一致就能正常渲染。

将 /login 路由的代码修改为如下内容即可：

<Route path="/login" element={<Login />} />

关于React生态的组件写法倾向 #

当前React生态确实整体偏向函数组件的开发模式：

• React官方在16.8版本推出Hook特性后，函数组件已经可以覆盖类组件的所有能力，且逻辑复用、代码精简度都优于类组件
• 目前React官方新文档已经将类组件内容归类为遗留API，所有默认示例都采用函数组件写法
• 大部分第三方生态库的新特性都会优先适配Hook的使用场景，类组件后续不会作为主流迭代方向，仅保留基础兼容能力

内容的提问来源于stack exchange，提问作者Oliver Kucharzewski