Topic: Navbar in next.js
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;
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
Closed
This topic is closed.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Closed
- 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