CODEWITHSUNDEEP
reactjsreact-router
THpubs
THpubs

Reputation: 8172

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

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?

Upvotes: 1

Views: 725

Answers (1)

Austin Greco
Austin Greco

Reputation: 33554

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

Upvotes: 1

Related Questions