Create navbar for login page-CodePudding

import React from "react";
import { Link } from "react";
function Navbar() {
  return <nav className="navbar navbar-dark bg-dark navbar-expand-lg">
  <Link to="/" className="navbar-brand">React Routing  Example</Link>
  <div className="ml-auto">
      <ul className="navbar-nav">
          <li className="nav-list"><Link className="nav-link" to="/home">Home</Link></li>
          <li className="nav-list"><Link className="nav-link" to="/about">About</Link></li>
          <li className="nav-list"><Link className="nav-link" to="/service">Services</Link></li>
          <li className="nav-list"><Link className="nav-link" to="/contact">Contact</Link></li>
      </ul>
  </div>
</nav>
}

export default Navbar;

then not showing navbar in browser showing error

react-jsx-dev-runtime.development.js:87 
        
       Warning: React.jsx: 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.

creating Navabar for lofin form

CodePudding user response：

You need to import Link from react-router-dom.

import React from "react";
import { Link } from "react-router-dom";
function Navbar() {
  return <nav className="navbar navbar-dark bg-dark navbar-expand-lg">
  <Link to="/" className="navbar-brand">React Routing  Example</Link>
  <div className="ml-auto">
      <ul className="navbar-nav">
          <li className="nav-list"><Link className="nav-link" to="/home">Home</Link></li>
          <li className="nav-list"><Link className="nav-link" to="/about">About</Link></li>
          <li className="nav-list"><Link className="nav-link" to="/service">Services</Link></li>
          <li className="nav-list"><Link className="nav-link" to="/contact">Contact</Link></li>
      </ul>
  </div>
</nav>
}

export default Navbar;

CodePudding user response：

You import Link from react that doesn't exist in react
you should use react-router for to use 'Link'.

CodePudding user response：

You should import { Link } from "react-router-dom", instead of importing it from "react" as it doestn't exist in "react". You can read more about the "react-router-dom" here https://reactrouter.com/en/main

import React from "react";
import { Link } from 'react-router-dom'
function Navbar() {
  return <nav className="navbar navbar-dark bg-dark navbar-expand-lg">
  <Link to="/" className="navbar-brand">React Routing  Example</Link>
  <div className="ml-auto">
      <ul className="navbar-nav">
          <li className="nav-list"><Link className="nav-link" to="/home">Home</Link></li>
          <li className="nav-list"><Link className="nav-link" to="/about">About</Link></li>
          <li className="nav-list"><Link className="nav-link" to="/service">Services</Link></li>
          <li className="nav-list"><Link className="nav-link" to="/contact">Contact</Link></li>
      </ul>
  </div>
</nav>
}

export default Navbar;