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

Solution 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

Solution 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")
);

Solution 3:

I believe it was mentioned above by Dennis Nerush, you need to use {browserHistory} instead of {hashHistory}, however for the same page rendering to work you need to configure your server a bit to allow for this.

Depending on where you are hosted or what server you are using there are a few ways to do this

For Apache you must add the following to the .htaccess (or create .htaccess and place it in the root folder of your website):

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

For Node.js/ Express you need to add the following code:

app.get('/*', function(req, res) {
  res.sendFile(path.join(__dirname, 'path/to/your/index.html'), function(err) {
    if (err) {
      res.status(500).send(err)
    }
  })
})

for Nginx servers you need to add the following to the Nginx.conf file

location / {
  if (!-e $request_filename){
    rewrite ^(.*)$ /index.html break;
  }
}

For Amplify you need to go to Rewrites & Redirects and add a new rule that with the following information (Note I have only used this on AWS):

Source address: </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>
Target address: /index.html
Type: 200

Here are a few links if you want to do some more research on the subject.

https://www.andreasreiterer.at/fix-browserrouter-on-apache/#comment-186 (Specifically for Apache)

https://ui.dev/react-router-cannot-get-url-refresh/ (Multiple methods for different servers or no server which I did not add above)

React Router DOM not working correctly on Amplify Console AWS (Use this one for AWS and Amplify)

Solution 4:

You will need to import browserHistory from react-router
and pass it to the <Router /> in order to remove the hash from the URL

Ex:

import { browserHistory } from 'react-router';

<Router history={browserHistory}>
 //Place your route here
</Router>