I am trying to make it so that instead of my browser displaying '.html' my browser will just display ''. 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/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] 

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] 

• javascript
• reactjs
• .htaccess
• webpack

• It's pretty unclear what you're looking for. What does your server code look like? Node.js or something else? What exactly are you trying to accomplish? Direct URL's ending in /foo to /foo.html? – jered Commented Jul 17, 2019 at 1:04
• @jered Ending in /foo. What is the server code? Is it webpack.config.js, package.json, or .babelrc? After I build my dist folder only has my four webpages, which are .html, and their .js files. – Sam Commented Jul 17, 2019 at 1:08
• @jered It's online on an AWS EC2 instance. I installed httpd on it. I'm editing it though and just running on a local server 'localhost:8080' by using 'webpack' to build and 'webpack-dev-server' to run it – Sam Commented Jul 17, 2019 at 1:12
• @jered There's no node.js file, there's a folder called node_modules. I use npm and webpack and webpack creates this folder for me. I don't know what you're talking about because you just said server files. I haven't encountered the term 'server files' in a sense that it refers to some specific files like node.js. The files are being served using webpack-dev-server. – Sam Commented Jul 17, 2019 at 1:46
• Can you post your webpack config and output? Does your project need to be crawled by Google and others? – Sandro Commented Jul 30, 2019 at 10:54

3 Answers 3

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.

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

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).