Nextjs Componnents Routing

[enkicoma]

Hi everyoane (my first message here)

may I ask for some help on routing some of my components. I think I have done something wrong but I don't understand what...

Here is my dir structure.

I have a 'components' folder for my header/nav-bar
Header.js and Section.js responds to bound all the components from header and section folder.
after I call these two files: Header.js and Section.js in index.jsx but for some reasons it fails with a compilation error:

Error: React.Children.only expected to receive a single React element child.

but if I am commenting out some code from Section.js file it works

                {/* <Link href="/" component={Home} exact />
                <Link href="/blog" component={Blog} />
                <Link href="/contact" component={Contact} />
                <Link href="/about" component={About} />
                <Link href="/login" component={Login} /> */}

here is my entire code for Section.js

import React, { Component } from 'react';
import Home from './section/Home';
import Blog from './section/Blog';
import Contact from './section/Contact';
import About from './section/About';
import Login from './section/Login';
import Link from 'next/link'


export class Section extends Component {
    render() {
        return (
            <section>
                <Link href="/" component={Home} exact />
                <Link href="/blog" component={Blog} />
                <Link href="/contact" component={Contact} />
                <Link href="/about" component={About} />
                <Link href="/login" component={Login} />
            </section>
        )
    }
}


export default Section

and here is my index.jsx

import { Header } from "../components/Header";
import { Section } from "../components/Section";

export default function Main() {
  return (
    <div>
      <Header />
      <Section />
    </div>
  );
}

Please let me know what I am doing wrong. Thank you, guys

[jamesmosier]

Hi @enkicoma. next/link (the <Link>) component is not meant to wrap components, instead you can think of it like an <a href=""> tag.

Here is how you could layout your application instead:

pages/_app.js

export default function MyApp({ Component, pageProps }) {
  return (
    <div>
       <Header /> {/* this will be present on every single page */}
       <Component {...pageProps} />
    </div>
  )
}

and your components would actually be pages:

pages/index.js
pages/blog.js
pages/contact.js
pages/about.js
pages/login.js

and then to link to each of those pages, you would use next/link: <Link href="/contact"><a>my link to the contact page</a></Link> and then you could do the same for all other pages.

I'd also recommend checking out the pages documentation which does a better job explaining how this works.