时间戳

首页 > 解决方案 > next.js 中的路由

javascript - next.js 中的路由

问题描述

当我执行我的程序时，它显示了这个错误：

错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

这是我第一次使用路线，next.js但我无法解决错误。

索引.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;

布局.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>
  )
}

页眉.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;

谢谢你的时间。

标签： javascriptreactjsreact-routernext.jsnext-router

解决方案

在 Next.js 中，我们不需要使用react-router-dom包和它的特性，比如（BrowserRoute as Router, Switch, Route）。在这里你有最好的信息来源，我鼓励你阅读。路由，路由器。

Next.js有一个基于 . 概念的基于文件系统的路由器 pages。

将文件添加到pages目录时，它会自动以route.

Next.jsrouter允许您在页面之间进行客户端路由转换，类似于单页应用程序。

提供了一个名为 Link 的 React 组件来执行此客户端路由转换。

推荐阅读