How to create routes from anchor tags from react router without the # in the url

Question

I have a single page in my application with several sections which can be scrolled. I want to use React Router to create links to these sections. I want them to be real links without the #. Exactly what they have done in the react-router documentation (https://reacttraining.com/react-router/web/guides/quick-start). In there, the sidebar links doesn't use anchor tags like #about. Instead, they use regular links which get mapped to the anchor tags. How can we do this?

Austin Greco · Accepted Answer · 2017-05-25 04:28:34Z

1

There are different types of Routers included with react-router, if you want the html5 push state version with no anchor tags, then you would use BrowserRouter.

import { BrowserRouter } from 'react-router-dom'

<BrowserRouter
  basename={optionalString}
  forceRefresh={optionalBool}
  getUserConfirmation={optionalFunc}
  keyLength={optionalNumber}>
  <App/>
</BrowserRouter>

--

<BrowserRouter basename="/calendar"/>
<Link to="/today"/> // renders <a href="/calendar/today">

If you wanted to use the anchor tag routing, then you would use HashRouter

answered May 25, 2017 at 4:28

Austin Greco

33.6k6 gold badges60 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

THpubs Over a year ago

In your example, does <a href="/calendar/today"> link to an anchor tag #today. HashRouter does add a # to the url right?

Austin Greco Over a year ago

yes, if you see in the docs for HashRouter the example it shows that a <Link> will render with the # -- <Link to="/today"/> // renders <a href="#/calendar/today"

Collectives™ on Stack Overflow

How to create routes from anchor tags from react router without the # in the url

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related