Amplify-console: Always redirecting to .index.html ?

[Zurdge]

* Please describe which feature you have a question about? *

So I've got a basic ReactJS project running on amplify.
Using the "react-router-dom" I'm able to link to urls such as
/
/docs/
/docs/food/
/docs/activities/
/settings/

How can I set this up using Amplify? Currently it is always redirecting me to /index.html if I refresh the page.

[Zurdge]

Update -
So using the 'Rewrites and redirects' tab in the Amplify Console i was able to add a source address and target address.
e.g.
"/doc/" to "index.html"
Then set the type to 200 (rewrite) so that the user will see '/docs/ and not 'index.html'

[ilyador]

I am having the same issue.
What rules did you give to have the router working?

[CaptainChemist]

I'm running into the same issue with a gatsby.js app and gatsby. The routing is great initially, but when I refresh my page, I get redirected to index.html and nothing loads. My redirects in the amplify profile looks like this:

|source address | target address | type|
|-|-|-|
|/<*> | /index.html | 404 (Redirect)|

What am I missing?

```

[CaptainChemist]

Oh I got it! You need a 404 (Rewrite) not a 404 (Redirect). Thanks everyone, I hope that works for you @ilyador

[ilyador]

@CaptainChemist Still getting redirected to index.html when entering or refreshing any page that is not root.
Things work fine when navigating inside the app.

[CaptainChemist]

@ilyador I just realized that I'm getting the same behavior as you. What tricked me is that although I did fix the problem where I refresh my page and I get redirected to an index.html page that is blank, the consequence of creating the 404 Rewrite rule is that I do get redirected to index.html for non-root pages which messes up the google metatags and any SEO that I'd want for that page.

Such a bummer- it was so close!

[IsaacTrevino]

Oh I got it! You need a 404 (Rewrite) not a 404 (Redirect). Thanks everyone, I hope that works for you @ilyador

This worked for me, I was able to navigate without any refresh problems.
I will update if behavior changes.

[CaptainChemist]

@IsaacTrevino watch out- as I mentioned in a later post, you might run into problems if you submit that particular link to the facebook share debugger so it is worth checking that crawlers can properly index the page when you use the 404 Rewrite even though the page appears to load fine when manually going to the page.

This might only be an issue with Gatsby but if you notice, that you get a 206 error it might also be worth waiting 24 hours and checking again because I've noticed that there is a caching issue with amplify that seems to resolve itself if you wait 24hr.

[tomasyaya]

Does somebody know if you can update the routing through the amplify cli?

[Joycehao19]

@CaptainChemist were you able to get the 404 rewrite to not redirect to index.html? I'm reading conflicting text in different responses so just checking in.

[kahdojay]

Hi @CaptainChemist @ilyador, please see this page in the docs Under "Redirects for Single Page Web Apps (SPA)" for an example of a 200 rewrite to allow your client side router to handle direct navigation to urls. Please let us know if this helps resolve your issue.

@tomasyaya while you currently cannot update redirects using the amplify cli, you can do so using the aws cli (update-app) (create-app) with the --custom-rules flag. Let us know if this isn't what you're looking for.

[IsaacTrevino]

So I am using react-router-dom instead of amplify rewrite/redirect, my amplify setting is as follows:
example.com | www.example.com | 302 (Redirect - Temporary)
/<*> | /index.html | 404 (Rewrite)
and for react-router-dom I am using

    <div className="App">
      <Router>
        <Switch>
          <Route exact={true} path='/'>
            <Home />
          </Route>
          <Route exact={true} path='/about'>
             <About />
          </Route>
          <Route exact={true} path='*'>
            <NotFound/> 
          </Route>
        </Switch>
      </Router>

To that effect.

[MEBonham]

I'm having a similar issue to this bug report. I'm using ReactJS and react-router-dom.

I can navigate to various pages of my site by clicking on links that are in the body of the page. However, if I navigate directly (using the address bar of the browser) or by clicking on links in my Nav menu, I get redirected to /index.html.

The body-links and the nav-links look identical in terms of their hrefs when I Inspect Element on them. Also, none of the redirects happen in the localhost version of the site, just in the Amplify-deployed version.

[MEBonham]

I found the Redirects settings and removed the one that Amplify had added on its own, redirecting <*> to /index.html. However, deleting this setting just made it so that the links that were exhibiting strange behavior before now lead to a "This XML file does not appear to have any style information ..." error page. (I didn't know I was using any XML at all.)

[swaminator]

@MEBonham did you follow this https://github.com/aws-amplify/amplify-console/issues/59#issuecomment-600214054

[MEBonham]

@MEBonham did you follow this #59 (comment)

I wasn't sure what parts of it were applicable, but I'll experiment with it.

EDIT: The first rule there seems to have fixed the problem for now. Thanks for answering!

[vishalvishalgupta]

how can i serve my next.js based app with amplify? After passing all the steps, the page is redirecting to index.html page and nothing is shown.

[swaminator]

@vishalvishalgupta we currently do not support server rendered apps. See: https://github.com/aws-amplify/amplify-console/issues/412 and upvote.

[grigull]

@CaptainChemist were you able to find the solution to get it to work with metatags and SEO?

[CaptainChemist]

@grigull I think there is some issue the redirects when hosted on amplify. With that said, I was able to get around it by having all of my login and redirects under a /user/* namespace instead of the root /. I use the /<*> source address, /index.html target address and 404 (redirect).

[tomyitav]

Hi, how can I change Rewrites and Redirects in amplify console?

[julianeon]

For people googling this and ending up here, the rewrite solution above (while not great for SEO) will work.

Add a rule in Amplify page for your site, Rewrites and Redirects.
enter source address as:

target as:
/index.html
type as:
200 (Rewrite)

Then, in the head section of index.html, add this:
< base href="/" / >

After that you'll be able to direct link.

[shide1989]

had the same issue when refreshing a page called "profil" path /profil/?summoner=SinyZ.
I simply created the following rule and it worked :

source : /profil
Target adress : /profil/index.html
Type : 200 (Rewrite)

[ajayep]

s up the google metatags and any SEO that I'd want for that page.

@CaptainChemist

how do i fix the metatags issue due to the redirect ?
The meta properties in index.html of my React App doesnt work when using a custom Domain
<meta property="og:description" content="text content....." />

I have the below configuration in amplify

[dvirben123]

Oh I got it! You need a 404 (Rewrite) not a 404 (Redirect). Thanks everyone, I hope that works for you @ilyador

You just save me at least one hour of debugging why it happing, thank you !!!

[narenandu]

Had to remove the last rule which seems to have fixed my issue

https://www.narenvadapalli.com/blog/gatsby-site-redirecting-to-homepage-aws-amplify/