Link tag not working in ReactJs, white screen

Question

Im working with bootstrap navbar in React Js App. When I use the following code the screen shows nothing not even the navbar, but when i replace 'Link' tag with 'a' tag and to='' to href='' it works, why is that so? there are also no errors in compilation

import React from 'react';
import {Link} from "react-router-dom";
export default function Navbar() {
  return (
    <>
    <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
  <div className="container-fluid">
    <Link className="navbar-brand" to="/">Navbar</Link>
    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span className="navbar-toggler-icon"></span>
    </button>
    <div className="collapse navbar-collapse" id="navbarSupportedContent">
      <ul className="navbar-nav ms-auto mb-2 mb-lg-0">

        <li className="nav-item pe-3" style={{display:'flex',alignItems:'center'}}>
        <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
        width="24" height="24" fill='white'
        viewBox="0 0 64 64"
        ><path d="M 32 3 L 1 28 L 1.4921875 28.654297 C 2.8591875 30.477297 5.4694688 30.791703 7.2304688 29.345703 L 32 9 L 56.769531 29.345703 C 58.530531 30.791703 61.140812 30.477297 62.507812 28.654297 L 63 28 L 54 20.742188 L 54 8 L 45 8 L 45 13.484375 L 32 3 z M 32 13 L 8 32 L 8 56 L 56 56 L 56 35 L 32 13 z M 26 34 L 38 34 L 38 52 L 26 52 L 26 34 z"></path></svg>
          <Link className="nav-link active"  aria-current="page" to="/">
          Home</Link>
        </li>

        <li className="nav-item pe-3"  style={{display:'flex',alignItems:'center'}} >
        <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
        width="24" height="24"
        viewBox="0 0 48 48"
><path fill="#2196F3" d="M37,40H11l-6,6V12c0-3.3,2.7-6,6-6h26c3.3,0,6,2.7,6,6v22C43,37.3,40.3,40,37,40z"></path><path fill="#FFF" d="M22 20H26V31H22zM24 13A2 2 0 1 0 24 17 2 2 0 1 0 24 13z"></path></svg>
          <Link className="nav-link active mr-5" to="/">About</Link>
        </li>

        <li className="nav-item pe-3" style={{display:'flex',alignItems:'center'}} >

        <img style={{height:'24px',width:'24px'}} alt='' src="https://img.icons8.com/external-bearicons-outline-color-bearicons/64/000000/external-sign-up-call-to-action-bearicons-outline-color-bearicons-1.png"/>
          <Link className="nav-link active" to="/signup">Sign Up </Link>
        </li>


        <li className="nav-item pe-3" style={{display:'flex',alignItems:'center'}}>
        <img  style={{height:'28px',width:'28px'}} src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABmJLR0QA/wD/AP+gvaeTAAAFWElEQVRoge3ZXWxTZRgH8P97ek4Xx9rRCGUUgfnF9GILMSCJZGyGYBSNCTFZCG5GUW+AG1QigRsSYmIMeqMYhjMYBsQLEhOjIheiY0QJSNALEkYGjEACbAhdW7b2tOf5e3Fa6Pqxfp1uN3uSpu96Ts95fn3ej51zgJmYiZmYLJSTB2s5HvZrymyDqKUgl4iCn1SzKAIAEQpGSFxSIudjptU32DF/xKlzVwxp7g/69Cg7AXSRXEZCgQSJ5ItAVpsgQYg6I4q9pjIOD63zBacF0twf9LlN+ZhUm0h4ksmhSMSENskQBXsT7prPygWVBVn222iXQPaQ8E9MrixE+n63CX54ZX3gcFUhK0+NeKKmsY/khsyEHECkb+utNfRNFzr8EcchLcfDfsOwjpF8rsoIwD7mOY2utZffahh2DJJEnCTZNBWIB21gIJbQWm9tLDy7aYV2WHlqxJOsxFQjQLLJ0OSXeQdvzaoYEovpX09Vd8pAJPeTZXo80VMRxJ6d0Dl9CHs/gOsDPdc3TJZr3jHS3B/0GSYv0vkptiREWvu2W7eeGXrn8ZzrTN6K2ItdmQgRSNwERZxCgOS8mKm2lVSR5v6gT49xCIS3nEok7oew3Kdw/m4ClrsOVK5KEanvjEbHpTG4NbsqOSuiR9lZLoJiYa6ewJFXn8C+9ga4xkOglXACAZL1brfKOVbyda2uSsaEruxCty30Yv/qAIyojakQYW8Du4qCtBwP+2n/F1v+wE6L1oVedK9eAD0aBiyrMoS9bUWge2BOQYjC+IsUURDLHqwioFhAVtvent6mWKAlwEQLVi3y4ps1C6BHQ6BlVYIACRWNGe2ZeeuZHzQkIq2Qib+a/Z52sOTfmTNaCuB/JLvHrlrkxf6XFuD9X2/ArPFkTABFI0ASGtEC4OikkJ1L577eGqjLSsSJaF9cj56XFd49dh0xdx2gXCUjQEBEmjKPnfXT1erKUxVFMtoWe/HtK4/BHQtnrDMlLKTQ/AUhHsNVU02IjanH9hVzIWa0dITdjb0FIZkDtXpRRiXS9suMLEgobsWqTfhjaBSf/DkM6O6yECRCBSH341a42oi3f7oG0/CA0MpBgETWVWPWrLX73J0fd58d3jzpFJuaaXOVnEDDLA1H31iShThxdRQbf04ilKtcBCAYKAi5ydqTVGrzg3UETOaeXE9S7TwnggisyP2clXAEQUIU/y0IMeP4XTc0AlA2QiURKg2kkNr2EKsABVA9XBjTEQ+6U4UIEqJc7MvMO2uMDHbMH4GoM6WeCEg7aZrEYQRIOR3+qOlOQUgyo0NlI0iYCfvDE1edRhCg6s2Vcs4Lq8Yf7s02ErFr9jVJaQgIYY2FsXyOwj93Eogbdc4hgKABV+O97U+OFlWRoXW+IAV7S0YQIBRUTS3OBmsQdztZCQCCr3Ih8kIAAHHjU4I3S0Kk2soFuPRK1oksBMlbuml8ni/dvJDBzkdDJLeVjMibXCUIQIitwV2576BMXhEAV9YHDpM4ON0IihwY39n0/WS5FrzTWGvom4X8e9oQ5JmxhHdLoTwLQi50+CNGXFsLYGDquxMvakp7DbsCYxVDAGBw4/wRy5QXQPw1hZU464q72iI7ni7qOWNREAC48d7CuzFNXwNB7xQgvhuLe9oju54q6tkIUOajt0DP9Q0gvyA5z2HETSE/KDSwHYMAQOOBq7NjptpGqi0kvRUiRkF8aWiuPfkWvKpBUuHrvlxvJFxvEuwC8TwJrUiEkHIa0A4Z0I6UC3AMkh6B7oE5UVNvU5ZaSsoSQvMr0CP2fbIwiWEQl4RyXllWX3jHs/85ef6ZmImZyB//A4/DONGQxBA2AAAAAElFTkSuQmCC" alt=''/>
          <Link className="nav-link active" to="/login">Login</Link>
        </li>
       
      </ul>
      
    </div>
  </div>
</nav>


    </>
  )
}

Routes

import Navbar from './components/Navbar';
import Homegif from './components/Homegif';
import {
  BrowserRouter as Router,

  Route,Routes
} from "react-router-dom";
import Signup from './components/Signup';
import Login from './components/Login';

function App() {
  return (
    <>
    <Navbar/>
    <Router>
    
    <Routes>
          <Route exact path="/" element={<Homegif/>}>
              
          </Route>
          <Route exact path="/signup" element={<Signup/>}>
          
          </Route>
          <Route exact path="/login" element={<Login/>}>
            
          </Route>
      </Routes>




  
    </Router>
    
    </>
   
  );
}

export default App;

This is the file with routes in it. This is rendered on the other page where I was getting error.

Answer 1

You are Using <Link className="nav-link active" to="/login">Login</Link> with the class that's why you are getting an error if you want to use the Link tag with the class react-router-dom provide the NavLink with the class attribute to it try changing it to this:

import {NavLink} from 'react-router-dom';

<NavLink className="nav-link active" to="/login">Login</Link>

Use NavLink instead of Link for using the class attribute.

you should define your routes like this

import Navbar from './components/Navbar';
import Homegif from './components/Homegif';
import {BrowserRouter as Router,Route,Routes} from "react-router-dom";
import Signup from './components/Signup';
import Login from './components/Login';

function App() {
  return (
    <>
    <Router>
          <Navbar/>
          <Routes>
          <Route exact path="/" element={<Homegif/>}/>
          <Route exact path="/signup" element={<Signup/>}/>
          <Route exact path="/login" element={<Login/>}/>
          <Routes/>
    </Router>
    </>
  );
}

export default App;

hopefully this will fix your issue