CODEWITHSUNDEEP
javascriptreactjsreact-router-dom
K41F4r
K41F4r

Reputation: 1551

react-router-dom Link - hide URL on hover

I'm using MemoryRouter and I don't want the browser to show the full link (in the bottom left corner) when hovering over Link.

<Link to="/somepath" />

Using a function in the to property didn't seem to work.

I know it wraps an <a> tag inside but it still uses href even when passed a function in to. Any way to implement this?

Upvotes: 1

Views: 2223

Answers (1)

diogo.silva
diogo.silva

Reputation: 448

If you don't want to show the link onHover, consider making the page change programatically with onClick instead of using a Link, as they appear as a normal a tag with it's own href attribute, exposing the URL.

Here's a snippet from the docs

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

function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

Upvotes: 1

Related Questions