How to to same page

Question

I'm converting some existing code to use React Router.

The code currently uses <a href="#" ...>, which I am changing to <Link to=??>.

My question is: What should I use for the "to" parameter? If I use to="#", the application routes to "/", which is not what I want.

It works if I use the current route name, but the whole idea of href="#" is that the code doesn't have to know how it is accessed.

I am using React Router 2 with history=browserHistory.

Does this answer your question? [Using anchor tags in react-router 4](https://stackoverflow.com/questions/48223566/using-anchor-tags-in-react-router-4) — Sam Apostel, Jul 01 '20 at 13:53

score 4 · Answer 1 · answered Nov 25 '21 at 19:02

Here are a few solutions that worked for me:

<Link to={{}}>
- to can take an object; sending an empty object stays on the current page
<Link to={{ search: '' }}>
- In my specific case, I wanted to stay on the same page but wipe the search params, which is what this does
<Link to={window.location.pathname}>
- Similar to the suggestion in Damien Leroux's answer, without the hash
<Link to="#">
- This seemed to work fine for me, maybe because I'm using react-router v6

What didn't work for me:

<Link to={this.props.route.path}
- I'm using functional components, so I don't have any this.props. Maybe there's another way in the react-router API to get the path.
<Link to=".">
- This linked to / for me

This is a comprehensive answer and it worked for me. Thanks @bmaupin — vikx01, Jan 16 '22 at 12:07
Comprehensive and effective. Should be the top answer. Thank you! — cr4z, Feb 17 '23 at 18:47

score 3 · Answer 2 · answered Mar 05 '20 at 08:58

For me this was the solution:

I used the npm module react-router-hash-link. It is quite easy to use. Docs here

import { HashLink as Link } from 'react-router-hash-link'; <Link smooth to="/#services">Services</Link>

And wrap your <App> component in <HashRouter> from npm module react-router-dom

score 1 · Answer 3 · answered Mar 14 '16 at 09:53

1

I think you could try something more or less like that:

<Link to={window.location.pathname} hash="/#">HASH</Link>

answered Mar 14 '16 at 09:53

Damien Leroux

This does not work, but the hint to use a props parameter was a good one. I'll give the solution in a formal "answer". Thanks. – Mark L Mar 14 '16 at 11:20

score 1 · Answer 4 · answered Mar 14 '16 at 11:25

This works because "this.props.route.path" is the route to the current page:

<Link to={this.props.route.path} ...

Note that if you have nested React components, you have to pass "this.path" down from the outer components, as described at https://facebook.github.io/react/docs/transferring-props.html

score 1 · Answer 5 · answered Sep 17 '19 at 16:40

1

<Link to='#' />

this works but it will still stack your history

answered Sep 17 '19 at 16:40

Acid Coder

score 0 · Answer 6 · answered Apr 18 '17 at 02:19

0

It works for me:

<Link className="dropdown-item" to="javascript:void()">
   Link Title
</Link>

answered Apr 18 '17 at 02:19

Chung Nguyen

score -1 · Answer 7 · answered Jul 01 '20 at 13:12

-1

If you need to go to a specified section of your "/" path (even from another path), you can make it work with the anchor tag as well, like this:

<a href="./#your-section-id">Go to Section</a>

Hope this helps.

answered Jul 01 '20 at 13:12

GTom

this does not answer the question asked. this: https://stackoverflow.com/questions/48223566/using-anchor-tags-in-react-router-4 does – Sam Apostel Jul 01 '20 at 13:52

7 Answers7