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

问题

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]

回答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.

回答2:

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:

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

回答3:

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

来源：https://stackoverflow.com/questions/57067152/remove-html-extension-from-a-url-for-a-website-built-using-react-and-webpack

标签

javascript

reactjs

.htaccess

Webpack