React-redux-starter-kit: Can't use browser url bar for navigation

Created on 15 Nov 2016 · 4Comments · Source: davezuko/react-redux-starter-kit

Hello,

Does anybody else have problem with using browser url bar for navigation after deployment to production? On my local machine it works just fine. Problem is that I can only navigate through links. Link pointing to <site>/foo works but if I try to navigate directly to <site>/foo I get 404.
My site url looks something like this for now http://mysite.s3-website-us-west-2.amazonaws.com/.
I suspect it have something to do with router with which I don't have much experience yet. I guess its good time to look into it seriously now 😄 but still.. I am asking here for help.

Source

kolpav

Most helpful comment

Hi @kolpav,
Are you just serving the compiled static files in some public directory?
If that is the case, you need to setup your server configuration so that every route you hit points to index.html.
That way the react router can pick it up from there.
You can do that in few ways:

use .htaccess (if you're using Apache)
it should look something like this:

<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews
    </IfModule>
    RewriteEngine On
    # Redirect Trailing Slashes...
    RewriteRule ^(.*)/$ /$1 [L,R=301]
    # Handle Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [L]
</IfModule>

use nginx

location / {
    try_files $uri $uri/ /index.html?$args;
}

use express to serve static files (with express-history-api-fallback) _(I prefer this solution :wink:)_
or serve your static files with preferred server solution (that handles this case)

Hope that helps.

bulicmatko on 15 Nov 2016

👍3

All 4 comments

use .htaccess (if you're using Apache)
it should look something like this:

<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews
    </IfModule>
    RewriteEngine On
    # Redirect Trailing Slashes...
    RewriteRule ^(.*)/$ /$1 [L,R=301]
    # Handle Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [L]
</IfModule>

use nginx

location / {
    try_files $uri $uri/ /index.html?$args;
}

use express to serve static files (with express-history-api-fallback) _(I prefer this solution :wink:)_
or serve your static files with preferred server solution (that handles this case)

Hope that helps.

bulicmatko on 15 Nov 2016

👍3

If that is the case, you need to setup your server configuration so that every route you hit points to index.html.
That way the react router can pick it up from there.

That makes perfect sense and is kind of obvious how else could react know what route to render when route from which is it served is not even hit. Thank you for making it clear for me!

I will paste here correct solution for anyone else using Amazons S3 copied from here