Why does my href tag become blank after I login

I am facing a very weird issue. In my react app, the navbar is something like:

<ul>
  <li>
    <a href={"/Marketplace"}>Marketplace</a>
  </li>
</ul>

I have a simple login feature in my app which redirects the user to the homepage after logging in. After I log in, the href value in the above anchor tag disappears. I can't seem to understand why this is happening. basically, the same code block now becomes:

<ul>
  <li>
    <a href>Marketplace</a>
  </li>
</ul>

CodePudding user response：

use Link instead of Anchor Tag if you are using react router

import { Link } from "react-router-dom";


<Link to="/Marketplace">Marketplace</Link>

CodePudding user response：

If you want to allow users to link to other pages on click, Use Link tag ! for more help react-router-dom

import React from "react";
import { BrowserRouter, Link, Route, Switch } from "react-router-dom";

const Marketplace = () => {
  return <div>This is the Market place</div>;
};

const Home = () => {
  return <div>This is the home page</div>;
};

export default function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <nav>
          <div>
            <Link to="/">Home</Link>
          </div>
          <div>
            <Link to="/Marketplace">Marketplace</Link>
          </div>
        </nav>
        <Switch>
          <Route path="/Marketplace">
            <Marketplace />
          </Route>
          <Route path="/" exact>
            <Home />
          </Route>
        </Switch>
      </BrowserRouter>
    </div>
  );
}