页脚导致 React 应用程序无法加载

Question

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

    </Footer>
  );
}

i am trying to launch my react app and when i do NPM start the app compiles but chrome will not load the app just gives me Error code: Out of Memory. It has somthing to do with the footer when i remove the footer tag from the portfolio container it loads, but with it i get the above error.

import React, { useState } from 'react';
import NavTabs from './NavTabs';
import Home from './pages/Home';
import Projects from './pages/Projects'
// import About from './pages/Home';
import Resume from './pages/Resume';
import Contact from './pages/Contact';
import Footer from './Footer';
export default function PortfolioContainer() {
  const [currentPage, setCurrentPage] = useState('Home');

  // This method is checking to see what the value of `currentPage` is. Depending on the value of currentPage, we return the corresponding component to render.
  const renderPage = () => {
    if (currentPage === 'Home') {
      return <Home />;
    }
    if (currentPage === 'Projects') {
      return <Projects />;
    }
    if (currentPage === 'Resume') {
      return <Resume />;
    }
    return <Contact />;
  };

  const handlePageChange = (page) => setCurrentPage(page);

  return (
    <div>
      <div className="portfolio-container">
      {/* We are passing the currentPage from state and the function to update it */}
      <NavTabs currentPage={currentPage} handlePageChange={handlePageChange} />
      {/* Here we are calling the renderPage method which will return a component  */}
      {renderPage()}
    </div>
    <Footer />
    </div>
  );
}

Answer 1

You are calling the function Footer within itself, causing an infinite loop.

When the Footer component renders you are returning <Footer> , which is actually the same function, which causes Footer to render itself over and over again until the browser runs out of space to store all of them.

You probably meant to use the <footer> HTML element instead.