How can I use nginx rewrite with try_files to get react router working?

Question

I am using the try_files directive with nginx and react to force all paths to go to /index.html and be handled by the react router so that the paths don't need to be prefaced with /#/.

This works for that:

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

So a url like /invitation will go to the right place.

However, there are still some sources that are generating /#/ urls and I would like to have them rewritten to the equivalent urls without the /#/ (so /#/invitation would go to /invitation).

I have tried every variation I can think of on this, including changing the order, escaping special characters, and with and without the permanent redirect, but nothing works:

location / {
    rewrite ^/#/(.*) $1 permanent;
    try_files $uri /index.html;
}

What's the right way to do this?

Unless I am mistaken, the section of a URL from the `#` onwards, is not actually sent to the server and is therefore not available for rewriting. — Richard Smith, Feb 02 '16 at 17:35

score 0 · Accepted Answer · edited May 23 '17 at 12:31

0

Richard Smith's comment is correct - the anchor portion never gets sent to the server. More info here: Is the anchor part of a URL being sent to a web server?

edited May 23 '17 at 12:31

Community

1
1

answered Feb 02 '16 at 18:15

fields

4,433
4
27
32

How can I use nginx rewrite with try_files to get react router working?

1 Answers1