CODEWITHSUNDEEP
react-router
Mark L
Mark L

Reputation: 420

How to <Link> to same page

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.

Upvotes: 12

Views: 38151

Answers (7)

bmaupin
bmaupin

Reputation: 16015

Here are a few solutions that worked for me:

  • <Link to={{}}>
  • <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}>
  • <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

Upvotes: 5

GTom
GTom

Reputation: 119

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.

Upvotes: -1

Seagull
Seagull

Reputation: 1133

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

stackoverflow answer

Upvotes: 3

Acid Coder
Acid Coder

Reputation: 2756

<Link to='#' />

this works but it will still stack your history

Upvotes: 1

Chung Nguyen
Chung Nguyen

Reputation: 501

It works for me:

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

Upvotes: 0

Mark L
Mark L

Reputation: 420

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

Upvotes: 1

Damien Leroux
Damien Leroux

Reputation: 11693

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

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

See there : https://github.com/reactjs/react-router/blob/master/docs/API.md#hash

Upvotes: 1

Related Questions