Footer组件引发React应用加载失败（内存溢出错误）

问题根源很明确：你的Footer组件存在无限递归渲染，这直接导致浏览器内存被耗尽。

看你的Footer组件代码，在return里写了<Footer>标签——这个标签对应的就是你当前定义的Footer组件。React渲染该组件时，会不断创建新的Footer实例，陷入无限循环，最终触发内存溢出错误。

修复方案： #

1. 替换递归的组件标签：把组件内部的<Footer>换成原生HTML容器，比如<footer>（小写，和组件名区分开）或者<div>，避免触发组件自调用。
2. 修正无效HTML属性：<p>标签不支持href属性，要实现跳转功能，必须用<a>标签代替。

修正后的Footer组件代码：

import React from 'react';
// import './Footer.css';
export default function Footer() {
  return (
    <footer>
        {/* <a href='https://github.com/Zac0088'><i className='fa-brands fa-square-github'></i></a> */}
        <a href='https://github.com/Zac0088'><i className='fa-brands fa-linkedin'></i></a>
        <a href='https://github.com/Zac0088'><i className='fa-brands fa-discord'></i></a>
    </footer>
  );
}

修改后组件不会再递归渲染，浏览器就能正常加载应用了。

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