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

Question

I am trying to make it so that instead of my browser displaying 'https://mydomainname.com/index.html' my browser will just display 'https://mydomainname.com/index'. My website is 4 web pages, that are written using React and Webpack bundles everything together so that i have 4 .html files (index, contact ...) and 4 .js files with the same prefix (index, contact, ...)

I'm not using react router. I don't really know what it is, but a lot of other answers mention it. Is it the only way to do it when I am using react?

This answer only mentions react router for non browser environments and doesn't give an answer for browser environments.

Another solution I've seen uses

link.split('.html')[0];
window.history.replaceState( null, null, link );

but for me, I receive the following when visiting any link like 'mydomainname.com/About.html'

Cannot GET /About

A solution which uses .htaccess didn't work. Maybe because I'm running it on a local host? I also heard it's not recommended for React.

This was my .htacess

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)\.html$ /$1 [L,R=301] 

Answer 1

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.

Answer 2

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