CODEWITHSUNDEEP
reactjs.htaccessmod-rewriteurl-rewriting
Clinton
Clinton

Reputation: 63

React redirect to index.html, www & https

I have a react app published to the web. I have the solution in place suggested by react to redirect all pages to index.html, that seems to work just fine by itself. I also need to redirect everything to https://www. That is where things start to fall apart. I can find bits and pieces of articles like: react-router redirect to index.html AND remove www from url in .htaccess

These provide useful info, but I'm still stuck in a position where I'm getting redirect loops in certain situations. I'm hoping someone with far more superior rewriting skills can point out my errors. I don't know if it matters, but I am using "react-dom": "^16.3.2", "react-router-dom": "^4.2.2", "webpack": "^4.8.1"

This is what I have come up with:

Options -MultiViews
RewriteEngine On

RewriteCond %{HTTPS} !=on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=302,L,NE]

RewriteCond %{HTTP_HOST} !^www\. [NC]
RewriteRule ^(.*)$ https://www\.%{HTTP_HOST}%{REQUEST_URI} [R=302,L,NE]

RewriteCond %{REQUEST_FILENAME} !-d 
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^. index.html [QSA,L]

Upvotes: 1

Views: 3365

Answers (1)

Walf
Walf

Reputation: 9288

Some subtle differences that may improve things:

Options -MultiViews
RewriteEngine On
RewriteCond %{HTTPS} =off
RewriteCond %{HTTP_HOST} ^(?:www\.)?(.+) [NC]
RewriteRule ^ https://www.%1%{REQUEST_URI} [R=302,L,NE]
RewriteCond %{HTTP_HOST} !^www\. [NC]
RewriteRule ^ https://www\.%{HTTP_HOST}%{REQUEST_URI} [R=302,L,NE]
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule . index.html [END]

The first change prevents a double-redirect, the patterns are simpler, and, lastly rewriting is terminated asap. If it works, then change your 302s to 301s.

Upvotes: 1

Related Questions