Keep query strings with AWS Amplify Hosting - React

Question

I currently have a react app using react-router-dom that works locally but not when deployed using AWS Amplify.

The problem is that when I route to a URL and use query strings, the browser gets a redirect and drops the query strings.

For example when I route to /path?value1=foo&value2=bar, the browser gets a 301 and redirects to url: /0000000X/path/ as shown below

I have tried using hash values as well as the /path/?value1=foo&value2=bar approach as mentioned in this post with no luck.

Below is my implementation:

Button.js

href: '/path?value1=foo&value2=bar'

Path.js

import queryString from 'query-string'
const values = queryString.parse(this.props.location.search)
console.log(values.value1) 
console.log(values.value2)

Routes.js

 <AuthenticatedRoute path="/path" exact component={Path} props={childProps} />

All of this works fine locally, redirects and I can access the query string params, but not in S3. Thanks in advance!

score 8 · Answer 1 · answered Oct 22 '19 at 16:36

8

Add this to AWS Amplify's Rewrites and Redirect:

[
    {
        "source": "</^((?!\\.(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$).)*$/>",
        "target": "/index.html",
        "status": "200",
        "condition": null
    },
    {
        "source": "/<*>",
        "target": "/",
        "status": "404",
        "condition": null
    }
]

answered Oct 22 '19 at 16:36

Ricardo Lozano

91
1
3

i mistakenly down voted this answer while this answer is correct and works for me. now i can't upvote it unless the answer is edited. shouldn't i be able to upvote this ? – umer May 04 '20 at 18:32
This solution worked for me, as did the one on [the AWS docs](https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html#redirects-for-single-page-web-apps-spa) `[{"condition":null,"source":"^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json)$)([^.]+$)/>","status":"200","target":"/index.html"}]`. It even avoids getting a 404 at all. Unfortunately we still need to hard-code these url extensions. – serg06 Jul 24 '21 at 23:59

score 0 · Answer 2 · answered Aug 14 '20 at 11:43

For me, this was caused by the default www redirect: https://example.com -> https://www.example.com. And the solution was to use www..

I think it's also possible to set up the www redirect correctly, see: https://github.com/aws-amplify/amplify-console/issues/97

Keep query strings with AWS Amplify Hosting - React

2 Answers2