Search code examples
reactjsreact-router-domaws-amplify

WebApp cannot be found (404) when trying to open the url in external app (e.g. powerpoint)

I have an application written in ReactJs, that is deployed on AWS amplify. It all works great but I'm struggling with something.

Whenever I refreshed on a certain path, for example www.domainname.com/path/path. It redirected me to www.domainname.com/index.html

I figured out that this had something to do with my redirects on AWS amplify. enter image description here

So, I tried changing the 404 (Redirect) to 404 (Rewrite), which worked. enter image description here

even though it worked, this gave me another problem. If I refresh the page on the example www.domainname.com/path/path again and I look at the network console in the browser. I see that page that loads gets an 404 Not Found error even though the page gets loaded.

enter image description here

This error causes annoying things for example I put my link in a powerpoint presentation, upon trying to open this. I get an error message that it cannot be found (404)

I don't get this error on localhost, only on my domains

Here is my routing in React

import { BrowserRouter, Route, Switch } from "react-router-dom";
import React from "react";

const App = () => {

    const search_slug_options = [
        `/${search}/${page}=:page?/:id?`,
        `/${search}/:value_1?/:value_2?/${page}=:page?/:id?`,
        `/${search}/:value_1?/${page}=:page?/:id?`,
        `/${search}/:value_2?/${page}=:page?/:id?`,

        `/${search}/:value_1?/:value_2?/:id?`,
        `/${search}/:value_1?/:id?`,
        `/${search}/:value_2?/:id?`
    ]


    return (
        <BrowserRouter>
            <Switch>
                <Route exact path="/:keyboard?" render={(props) => <SomeComponent {...props} />} />
                {search_slug_options.map((path, index) => <Route key={index} path={path} render={(props) => <SomeComponent {...props} />} />)}
                <Route path="/user/:id/:name/:mod?" render={(props) => <SomeComponent {...props} />} />
                <Route path="/user/:id/:name?" render={(props) => <SomeComponent {...props} />} />
                <Route exact path="/privacy/policy" render={(props) => <SomeComponent {...props} />} />
                <Route path="/:id?/:value?" render={(props) => <SomeComponent {...props} />} />
                <Route path="*" render={(props) => <NotFound {...props} />} />
            </Switch>
        </BrowserRouter>
    );
}

export default App;

This is all out of my domain as I'm just a starting frontender.

Any clues? ideas? solutions?

Edit: Maybe notable to say, the Redirect line was automaticly added by AWS amplify, upon removing this, and refreshing my browser, I get this error:

enter image description here

Solution

  • After going deeper in the documentation for AWS amplify I found my solution..

    Turns out after adding this line to the AWS amplify redirects and rewrites, works as a charm:

    </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json|webp)$)([^.]+$)/>

    enter image description here