Value other than # that will force a link to not redirect

Question

I'm trying to track down a value other than the hash symbol which can be passed to an <a href="#">Do not redirect</a> and not redirect the page.

My issue is that the # is being tracked by the browser history, and it's adding an extra step to clicking the back button. For example:

www.example.com?page=2#
*click back button in browser*
www.example.com?page=2
*click back button in browser*
www.example.com?page=1

I'm working in a library whereby the button MUST have a value passed (cannot be blank, otherwise the page will refresh). Any ideas? :(

A button is not a link. If you want to have a button that doesn’t redirect to a page, don’t use a link. If your library requires a link for a button, don’t use that library. — Sebastian Simon, Jun 27 '16 at 16:24
@Xufox I can't JUST not use that library. Its a wrapper around React that my company uses. Unfortunately. — Mmm Donuts, Jun 27 '16 at 16:25
@LAROmega that's what I'm doing right now - so messy though! haha — Mmm Donuts, Jun 27 '16 at 16:57
Possible duplicate of [Href attribute for JavaScript links: “#” or “javascript:void(0)”?](http://stackoverflow.com/q/134845/1529630). Ignore the answers which don't say "neither". — Oriol, Jun 27 '16 at 17:29

score 1 · Accepted Answer · answered Jun 27 '16 at 17:18

If you don't need the # or the href then you should be using a button. Just style your button to look like a link. And then use JS function to handle the navigation changes that are needed. Here is a super basic example:

HTML

<button class="link" onclick="link('link to page 28')">looks like link</button>
<br>
<button onclick="link('button to page 27')">looks like button</button>

CSS

.link {
  border: none;
  background: none;
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}

JS

function link(page) {
  console.log('redirect to ' + page);
  //do in app nav change, or update URL param, or window.location, etc
  // whatever your process is
}

Example: https://jsfiddle.net/Lhvgxr9q/3/

Value other than # that will force a link to not redirect

1 Answers1