Redirect to https secured not working in react-router

Question

Using create-react-app together with react-router, how can I make any of the following variations (I don't think I missed any):

• www.example.com
• example.com
• http://example.com
• http://www.example.com

redirect to:

https://www.example.com (notice the https, secured)

I tried adding a subdomain of www, then created an .htaccess file with the following code:

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

When I add that, react routes don't work, and I get a blank page. (I'm using 1and1 to host.) What am I doing wrong, and how can I fix it?

Answer 1

I got this issue and i'm also using 1&1,

It this because you need to redirect everything to your index.html in order to make react-router work properly.

Here, you only making an http to https redirection, which is the first part on the job.
But, you also need to make that https request redirect to your index.html file.

So you make your http to https redirection :

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [NC,L,R=301]

Then, if https is "on" you redirect everything to index.html

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteCond %{HTTPS} on
RewriteRule ^(.*)$ /index.html [NC,L,QSA]

And you can test your .htaccess here : https://htaccess.madewithlove.be/
It works fine in theory, but i don't know why in my case it the redirection didn't works when the URI was "/".

So I added this :

"If https is not activate and the URI is "/" then redirect to the root of my website with https"

RewriteCond %{HTTPS} off
RewriteCond %{REQUEST_URI} ^.$
RewriteRule .* https://"your-site.com"/ [NC,L,R=301]

---

To summarize the answer

<IfModule mod_rewrite.c>

    RewriteEngine On
    RewriteCond %{HTTPS} off
    RewriteCond %{REQUEST_URI} ^.$
    RewriteRule ^(.*)$ https://"your-site.com"/ [NC,L,R=301]

    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-l
    RewriteCond %{HTTPS} off
    RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [NC,L,R=301]

    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-l
    RewriteCond %{HTTPS} on
    RewriteRule ^(.*)$ /index.html [NC,L,QSA]

</IfModule>