Throw 403 error after page refresh on NextJS - reactjs

I have an app with Next.js. It has some routes (pages).
I place the app on the static hosting. Everything works fine, but when I resfersh any page except home page, I get 403 error..
I place the .htaccess in root dir with code:
<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>
But no result.
Please help me fix this propblem...

Related

Nextjs Apache .htaccess redirects my app to base url on refresh

I have a static application in production, and it's hosted on apache server, now everything is working fine except when I go to a single resource (details page), and refresh, the app goes back to the base url.
https://{base_url}/dashboard/invoices/list/ (refreshes alright)
https://{base_url}/dashboard/invoices/150/ (goes back to {base_url})
My .htaccess file:
RewriteEngine On
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . index.html [L]

Why React Application doesn't work in hosting subdirectory?

I have a React app with the react router.
After build I try to start react app on my hosting server.
App is working in root directory /example.com correctly.
But I want to run it at subdirectory like /example.com/sub and it doesn't work.
It's possible, problem in .htaccess file.
Here's .htaccess content
<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>

http to https automatically with reactjs react-router application

I am trying to configure my reactjs react router application to automatically redirect the user to a secure url.
http://url.com -> https://url.com
I currently have this configuration in my htaccess
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
I have try this solution :
https://stackoverflow.com/a/60474317/19574875
But, I have an "ERR_TOO_MANY_REDIRECTS" error.
Do you have any ideas ?
Thank you in advance

.htaccess - redirect between two react apps

I have two react apps in the same subdomain - in different directories.
app.domain.com
app.domain.com/login
For react router to work I have existing .htaccess rules to redirect all traffic to the app (index.html)
RewriteEngine On
#Redirect to https
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
RewriteBase /
#Not sure what this does
RewriteCond %{QUERY_STRING} ^open&guid=
RewriteRule ^ ? [R=301,L,NE]
#Not sure what this does
RewriteRule ^index\.html$ - [L]
#Redirect all to index.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
I want to allow to load the react app in directory /login and redirect all /login/* requests to /login/index.html.
How can I apply these rules using .htaccess?
Kind regards /K

Your existing .htaccess is fine. Just create another .htaccess under /login/ directory as this:
RewriteEngine On
#Redirect all to index.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.html [L]
This will route every non-file and non-directory /login/* request to /login/index.html

With your shown samples, could you please try following. Please make sure you clear your browser cache before testing URLs.
RewriteRule ^login/?$ login/index.html [NC,L]
OR uri has starting login with having other things in uri.
RewriteRule ^login(?!=index\.html) login/index.html [NC,L]

React Router Dom and htaccess

I built my React App; when I try to go to my URL and visit pages of my App, everything is okay.
But when I try to go to directory on my server, that redirects me to the 404 page that I made.
I know that it's because my .htaccess is not configured as it should be.
Actually, my .htaccess is:
<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>
Thanks to this code, I can navigate on my App but I can't visit other directory that there not build with React. How can I change that to what I want?

Resources