Remove .html extension from a url for a website built using React and Webpack

I don't know if my suggestion worth the answer, but here's the simple thing you can do:

Put each page in a separate folder named after the page and rename the html file to index.html. E.g. about.html -> about/index.html. This will trick your web server so when the users will type https://mydomainname.com/about the server will be looking for about folder and automatically pick index.html file from that folder.

The home page should be named just as index.html and placed in the root directory and it will be accessible by domain name without any path specified.

This solution doesn't require any apache/nginx configuration, considering you have default configurations.

Once you learn react-router you shouldn't have such problems anymore, so consider this solution as a hacky one.

Happy coding!

P.S. Take a look at Gatsby - React static site generator. It's quite easy and straightforward and does exactly the same thing your current setup does - generates React into html files.

The thing is you can't do this using client-side facilities. You can only change the URL in a browser display bar using client-side javascript (react, vanilla js and so on), but this will not redirect you to the specific page. You can learn more about that here.

To achieve the thing you need, you have to deal with the server-side code. So, you should have access to the server itself. For example, it will look like this:

1. Client asks server to get him this url: https://mydomainname.com/index
2. Server knows that it should look for the file 'index' with .html extension and it looks for it.
3. If it has found the right file, it will return appropriate index.html file. (url in a display bar won't change).

React Router is really easy to use, here's an example:

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Switch, withRouter } from 'react-router-dom';
import { createHashHistory } from 'history';

import Home from './components/home';
import Contact from './components/contact';
import Login from './components/login';

const history = createHashHistory();

const Root = () => {
  const { location } = history;
  return (
    <Router history={history}>
      <Switch location={location}>
        <Route path="/login" exact component={Login} />
        <Route path="/contact" exact component={Contact} />
        <Route path="*" exact component={Home} />
      </Switch>
    </Router>
  )
};

ReactDOM.render(
  Root(),
  document.getElementById('Root'),
);

You just need to import your finished pages as components, in this way you have more flexibility, now you can render conditionally or apply transition effects.

I made a little project some months ago, hope you can find something useful