Next.js路由开发报错求助：Element type is invalid错误排查

Hey there! Let's break down exactly what's causing that frustrating error and walk through how to fix it step by step.

Key Issues Identified #

1. Typos in React Router Import #

First off, you've got a typo in your react-router-dom import:

// Wrong: Missing an 'r' in BrowserRouter
import { BrowserRoute as Router, Switch, Route } from 'react-router-dom'

This means Router is undefined—which directly triggers the "Element type is invalid" error because React can't render an undefined component.

2. Next.js Doesn't Need react-router-dom #

Next.js has its own file-system based routing system built right in. Using react-router-dom alongside it will cause conflicts and unnecessary complexity, so we can ditch that entirely.

3. Infinite Loop from Self-Rendering #

In your Home component, you're rendering the Home component itself via a Route:

<Route path="/" component={Home} />

This creates an infinite loop where Home keeps rendering itself over and over, which will crash your app.

4. Anchor Link Misuse with Next.js Link #

Your Header uses Next.js Link with anchor paths like #projects, but this won't work as expected out of the box for page navigation or scroll-to sections.

Corrected Code Examples #

1. Update pages/index.js (Remove React Router) #

We'll strip out all react-router-dom code and focus on Next.js's native routing:

import BgAnimation from '../components/BackgrooundAnimation/BackgroundAnimation';
import Hero from '../components/Hero/Hero';
import Projects from '../components/Projects/Projects';
import Contact from '../components/Contacts/Contact';
import { Layout } from '../layout/Layout';
import { Section } from '../styles/GlobalComponents';

const Home = () => {
  return (
    <Layout>
      <Section grid>
        <Hero />
        <BgAnimation />
      </Section>
      {/* Keep your home page content here */}
      <Projects />
      <Contact />
    </Layout>
  );
};

export default Home;

2. Create Separate Pages for Routes #

Next.js automatically creates routes based on files in the pages directory. Let's add the pages you need:

pages/about.js

import { Layout } from '../layout/Layout';
import Timeline from '../components/TimeLine/TimeLine';

const About = () => {
  return (
    <Layout>
      <Timeline />
    </Layout>
  );
};

export default About;

pages/contact.js

import { Layout } from '../layout/Layout';
import Contact from '../components/Contacts/Contact';

const ContactPage = () => {
  return (
    <Layout>
      <Contact />
    </Layout>
  );
};

export default ContactPage;

3. Fix Header Navigation #

Update your Header to use Next.js's native routing for page links, and add smooth scrolling for anchor sections:

import Link from 'next/link';
import React from 'react';
import { AiFillGithub, AiFillInstagram, AiFillLinkedin } from 'react-icons/ai';
import { AiOutlineBook } from "react-icons/ai";
import { Container, Div1, Div2, Div3, NavLink, SocialIcons, Span } from './HeaderStyles';

const Header = () => (
  <Container>
    <Div1>
      <Link href="/">
        <a style={{ display:"flex", alignItems: "center", color: 'white', marginBottom:20}}>
          <AiOutlineBook size="3rem"/><Span>Portfólio</Span>
        </a>
      </Link>
    </Div1>
    <Div2>
      {/* Scroll to Projects section on home page */}
      <Link href="/">
        <NavLink onClick={() => {
          const projectsSection = document.getElementById('projects');
          if (projectsSection) projectsSection.scrollIntoView({ behavior: 'smooth' });
        }}>Projetos</NavLink>
      </Link>
      {/* Link to Contact page */}
      <Link href="/contact">
        <NavLink>Contactos</NavLink>
      </Link>
      {/* Link to About page */}
      <Link href="/about">
        <NavLink>Sobre mim</NavLink>
      </Link>
    </Div2>
    <Div3>
      <SocialIcons href="https://www.linkedin.com/in/sérgio-carreirinha/">
        <AiFillLinkedin size="3rem"/>
      </SocialIcons>
      <SocialIcons href="https://github.com/SergioCarreirinha">
        <AiFillGithub size="3rem"/>
      </SocialIcons>
      <SocialIcons href="https://www.instagram.com/sergio_carreirinha/">
        <AiFillInstagram size="3rem"/>
      </SocialIcons>
    </Div3>
  </Container>
);

export default Header;

Final Notes #

• Make sure all your page components live in the pages directory—Next.js handles routing automatically from there.
• Double-check component imports for typos (like your original BrowserRoute mistake) to avoid undefined component errors.
• Avoid rendering a component inside itself—it's a surefire way to create an infinite loop.

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