Routing in next.js

Question

When I execute my program, it shows me this error:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

It's the first time I'm working with routes in next.js and I can't solve the error.

Index.js

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 Timeline from '../components/TimeLine/TimeLine';
import { Layout } from '../layout/Layout';
import { Section } from '../styles/GlobalComponents';
import { BrowserRoute as Router, Switch, Route } from 'react-router-dom'

const Home = () => {
  return (
    <Router>
      <Layout>
        <Section grid>
          <Hero />
          <BgAnimation />
        </Section>
      <Switch>
        <Route path="/" component={Home} />
        <Route path="/about" component={Timeline} />
        <Route path="/contact" component={Contact} />
      </Switch>

      </Layout>
    </Router>
  );
};

export default Home;

Layout.js

import React from 'react'

import Header from '../components/Header/Header'
import { Container } from './LayoutStyles'

export const Layout = ({children}) => {
  return (
    <Container>
     <Header/>
     <main>{children}</main> 
    </Container>
  )
}

Header.js

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>
      <Link href="#projects">
        <NavLink>Projetos</NavLink>
      </Link>
      <Link href="#contact">
        <NavLink>Contactos</NavLink>
      </Link>
      <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;

Thanks for your time.

routes work differently in `nextjs`, can you please read this doc https://nextjs.org/docs/routing/introduction — Pradip Dhakal, Nov 09 '21 at 10:59

score 0 · Answer 1 · answered Nov 09 '21 at 11:38

In Next.js we do not need to use react-router-dom package and its features like (BrowserRoute as Router, Switch, Route). Here you have the best source of information, I encourage you to read. Routing, router.

Next.js has a file-system based router built on the concept of pages.

When a file is added to the pages directory it's automatically available as a route.

Next.js router allows you to do client-side route transitions between pages, similar to a single-page application.

A React component called Link is provided to do this client-side route transition.

Routing in next.js

1 Answers1