How to remove the hash from the url in react-router

Question

I'm using react-router for my routing and I use the hashHistory option so that I could refresh the page from the browser or specify a url of one of my existing routes and land on the right page. It works fine but I see the hash in the url like this: http://localhost/#/login?_k=ya6z6i

This is my routing configuration:

ReactDOM.render((  <Router history={hashHistory}>     <Route path='/' component={MasterPage}>       <IndexRoute component={LoginPage} />       <Route path='/search' component={SearchPage} />       <Route path='/login' component={LoginPage} />       <Route path='/payment' component={PaymentPage} />     </Route>   </Router>),     document.getElementById('app-container')); 

Answer 1

Did you try the browserHistory option ? You will be able also to refresh the page from the browser or specify a url of one of existing routes and land on the right page.

import { Router, Route, browserHistory } from 'react-router';  ReactDOM.render((  <Router history={browserHistory}>     <Route path='/' component={MasterPage}>       <IndexRoute component={LoginPage} />       <Route path='/search' component={SearchPage} />       <Route path='/login' component={LoginPage} />       <Route path='/payment' component={PaymentPage} />     </Route>   </Router>),     document.getElementById('app-container')); 

Moreover hashHistory is not for production use considering the react-router github doc.

https://github.com/ReactTraining/react-router/blob/master/docs/guides/Histories.md#browserhistory

Should I use hashHistory?

Hash history works without configuring your server, so if you're just getting started, go ahead and use it. But, we don't recommend using it in production, every web app should aspire to use browserHistory

Answer 2

i am new to react but i have used BrowserRouter and it works fine :-

    import React from "react";     import ReactDOM from "react-dom";     import { BrowserRouter, Route, Switch } from "react-router-dom";  ReactDOM.render(   <BrowserRouter >     <Switch>       {indexRoutes.map((prop, key) => {         return <Route to={prop.path} component={prop.component} key={key} />;       })}     </Switch>   </BrowserRouter>,   document.getElementById("root") );