Navbar in next.js


Topic: Navbar in next.js

bgining2this asked 2 years ago

Normal navigation between the site

Error React.Children.only expected to receive a single react element child on each Link

import React, { Component } from "react"; import { MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavItem, MDBNavLink, MDBNavbarToggler, MDBCollapse, MDBFormInline, MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem } from "mdbreact"; import { BrowserRouter as Router } from 'react-router-dom';

class NavbarPage extends Component { state = { isOpen: false };

toggleCollapse = () => { this.setState({ isOpen: !this.state.isOpen }); }

render() { return ( Navbar Home Services
); } }

export default NavbarPage;


Jakub Chmura staff premium answered 2 years ago

Hi @bgining2this,

First of all, you can't use react-router-dom at next.js because next have their own routing.

You should use a next.js Link instead MDBNavLink :

import Link from 'next/link';
//
// and then in "return"
//
       <Link href="/">
            <a className="nav-link">Home</a>
       </Link>

That's all I can say about your code example. The code you paste here is incomplete. If you have problems configuring the next.js application, you can download the pre-configured application from my GitHub and see how I use the navigation bar component there.

https://github.com/JakubChm/nextjs-mdbreact

Best, Kuba


bgining2this commented 2 years ago

Thank you Jakub !!!


FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.25.3
  • Device: Desktop
  • Browser: Chromium, Opera
  • OS: Arch Linux
  • Provided sample code: No
  • Provided link: No
Tags