Removing # from HashRouter

Question

I'm using react-router-dom for my routing and, since I'm also using GitHub Pages, I need to use HashRouter in my Router.jsx like so

import React from 'react';
import { HashRouter as Router, Route, Switch } from 'react-router-dom';

import Home from './Home';
import Customer from './Customer';

const MyRouter = () => (
  <Router>
    <Switch>
      <Route path="/customer" component={Customer} />
      <Route path="/" component={Home} />
    </Switch>
  </Router>
);

export default MyRouter;

In my Home.jsx component I have defined my propTypes like so

Homepage.propTypes = {
  history: PropTypes.shape({ // set by react-router
    push: PropTypes.func.isRequired,
  }).isRequired,
};

My problem is that everytime I get a # in my URL and I would like to know why is it there all the time and why does my localhost without # redirect me to the same URL but with #(like if I go to http://localhost:4000/myApp/ it will redirect me to http://localhost:4000/myApp/#/). I would like to get rif of it for tracking purposes. I've tried using BrowserRouter but it won't work, as well as the history parameter for the Router like history={createHashHistory({ queryKey: false })} or history={browserHistory}.

Thank you very much (and sorry for my English)

Answer 1

Due to the front end nature of your client side React application, routing is a bit of a hack. The functionality of the two main router options are as follows :

HashRouter uses a hash symbol in the URL, which has the effect of all subsequent URL path content being ignored in the server request (ie you send "www.mywebsite.com/#/person/john" the server gets "www.mywebsite.com". As a result the server will return the pre # URL response, and then the post # path will be handled by parsed by your client side react application.

BrowserRouter will not append the # symbol to your URL, however will create issues when you try to link to a page or reload a page. If the explicit route exists in your client react app, but not on your server, reloading and linking(anything that hits the server directly) will return 404 not found errors.

The solution to this problem can be seen on this extensive post : https://stackoverflow.com/a/36623117/2249933

The main principle is that you match your client side routes, with routes on your server, that way allowing clean url's, but without the limitations of browser router on it's own.

Answer 2

I faced this issue today. I was trying to learn dynamic routing and I used hashRouter first. After a while, I want to get rid of hash sign and then learned that all purpose of the hashRouter is completely different than what I am trying to achieve.

But converting current hashRouter was easy if you understand your current structure. I am using webpack and testing them on webpack-dev-server, I have lots of nested routes and this method is working for me.

import { createBrowserHistory } from "history";
import { Route, Switch, Redirect, BrowserRouter } from "react-router-dom";

const hist = createBrowserHistory();

<BrowserRouter history={hist}>
  <Switch>
    <Route path="/" component={ComponentName} />
  </Switch>
</BrowserRouter>

Note: Addition to that for webpack there are some configs to add like follows;

In webpack.config.js

output: {
   ...
   publicPatch: "/",
   ...
}

devServer: {
   ...
   historyApiFallback: true,
   ...
}

As I understand,

1. publicPath resolve finding chunked code connections with giving them predetermined path (which is an issue on dynamic routing to call nested routed pages)
2. historyApiFallback is the magic in here. Nested routes don't connect to browserHistory, when you are trying to request the link since this is client-side routing, it returns blank. But if you put historyApiFallback config, dev-server returns all unknown links to index.html. That means all nested routes links are treating as unknown, but since it loads index.html to the user. User can access the pages with their determined route addresses.