React router 404 Error On (Litespeed Webserver)

Question

I am building movie app, initialize with create-react-app. I am using react-router@5. I get 404 Error when route url on production (on Litespeed webserver) but it's work on local machine.

Example Url :

www.example.com/tv/detail/131959

I am research on issue and found .htaccess file configuration, but configuration for apache or tomcat and I use litespeed web server.

AppRouter.js

const AppRouter = () => {
  return (
    <BrowserRouter >
      <Navbar />
      <ScrollToTop />
      <Switch>
        <Route exact path="/" component={App} />
        <Route exact path="/:type/detail/:id" component={DetailPage} />
      </Switch>
    </BrowserRouter>
  )
};

For inspect visit github repo: https://github.com/egecanyldrm/movie_app

.htaccess config

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
</IfModule>

LiteSpeed is essentially the same as Apache (some "_minor_" differences). What is your `.htaccess` config? — MrWhite, Jan 29 '22 at 12:13
And where are the `.htaccess` and `index.html` files located? Is the 404 error a LiteSpeed response or from your app? — MrWhite, Jan 29 '22 at 12:18
.htaccess and index.html located same root . Yeah error is litespeed response visit my web site [movie-app](https://movie-app.egecanyildirim.com/) — Egecan Yıldırım, Jan 29 '22 at 12:22
The homepage works OK (`server: LiteSpeed`), but it seems inner pages are not - but these are coming from `server: AmazonS3` / `x-cache: Error from Cloudfront`? Is the `.htaccess` file doing anything at all? Are `.htaccess` overrides enabled in the server config? Do you have access to the server config? — MrWhite, Jan 29 '22 at 12:29
I think `.htaccess` file not work. ı don't know what is overrides enabled server config. Yes ı have access server config — Egecan Yıldırım, Jan 29 '22 at 13:08
"what is overrides enabled server config." - `.htaccess` overrides need to be enabled in the server config (by default `.htaccess` files are not processed). In the relevant `` container that relates to the document root directory you would need to set something like `AllowOverride All`. See https://stackoverflow.com/questions/18740419/how-to-set-allowoverride-all — MrWhite, Oct 31 '22 at 10:48

Mohammad AbdulHakim · Answer 1 · 2023-01-26T10:29:38.723

0

Your .htaccess is correct, you should edit script and css src in HTML file, for this follow these steps

go to your project files directory it seems like that /var/www/html/
run this command nano index.html
edit script path from this ./static/js/main.123.js to /static/js/main.123.js
and style sheet path from ./static/css/main.12345.css to /static/css/main.12345.css
then save file by press ^s then close it by ^x

إن شاء الله it will work and you can change script path py open file and change it without nano if it is possible for you.

edited Jan 26 '23 at 10:29

answered Jan 21 '23 at 12:33

Mohammad AbdulHakim

1
1

1

How does this relate to the question?! – MrWhite Jan 21 '23 at 13:11

score -1 · Answer 2 · answered Oct 31 '22 at 09:32

-1

Update your .htaccess with following script

RewriteRule ^index\.html$ – [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

I'm using LiteSpeed and it works

answered Oct 31 '22 at 09:32

Fadhil Aweim

1

This is the same as the code already presented in the question?! (If you read the comments below the question it would seem the `.htaccess` file is not being processed at all?) – MrWhite Oct 31 '22 at 10:49

React router 404 Error On (Litespeed Webserver)

2 Answers2