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.
7 Answers
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
Here are a few solutions that worked for me:
<Link to={{}}>tocan 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
- Similar to the suggestion in Damien Leroux's answer, without the
<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.
- I'm using functional components, so I don't have any
<Link to=".">- This linked to
/for me
- This linked to
I think you could try something more or less like that:
<Link to={window.location.pathname} hash="/#">HASH</Link>
See there :
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
<Link to='#' />
this works but it will still stack your history
It works for me:
<Link className="dropdown-item" to="javascript:void()">
Link Title
</Link>
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.
