CODEWITHSUNDEEP
reactjsroutesreact-router
Computor
Computor

Reputation: 35

How to route with no hashtag in hashtag router in react?

Anytime I call my router with something like http://localhost:8080/login, react-router edits the path, and reroutes it to http://localhost:8080/login#/ (an invalid route), when I want it to reroute to http://localhost:8080/#/login (a valid route). How can I do this?

I've already tried adding 

historyApiFallback: {
   index: '/'
},

to my webpack.config. I'm not sure how else to find this information.

My code: https://pastebin.com/raw/XCvgV6rP

Upvotes: 2

Views: 6318

Answers (2)

Andy Theos
Andy Theos

Reputation: 3346

When you enter http://localhost:8080/login in browser's URL bar, after pressed Enter, browser moves you to login, then hash router adding his slash, making it /login#/ in the end. If you are using Link and history.push then HashRouter will redirect just fine. With HashRouter you don't have /login per se.

Take a look @Marco answer though, probably you will be using BrowserRouter to get rid of those pesky hashbangs anyway.

Upvotes: 0

Marco
Marco

Reputation: 527

To solve your problem you just need to use the BrowserRouter instead of the HashRouter that you currently import in your index.js file.

HashRouter uses the hash portion of the URL (i.e. window.location.hash) to keep your UI in sync with the URL, whereas BrowserRouter uses the HTML5 history API (pushState, replaceState and the popstate event) to keep your UI in sync with the URL.

Sources: HashRouter BrowserRouter

Upvotes: 2

Related Questions