Domain shows page cannot be found if a path provided after top level domain

Question

As the title states I have a domain that is hosting a web app if I click directly from the app to "/login" it goes to the required page perfectly however if a directly type in "https://my-domain.co.uk/login" it says page can't be found.

I have a single page web application built using React that is hosted on amplify and its domain is managed by google domains. I have added the necessary DNS records to google domain but since google domain does not have a type @ record available I employed a domain forwarding technique that was recommended.

<BrowserRouter>
  <Routes>
    <Route path={"/"} element={<LandingPage />} />
    <Route path={"/sign-up-start"} element={<SignUp />} />
    <Route path={"/sign-up"} element={<SignUpForm />} />
    <Route path={"/termofuse"} element={<TermAndConsitions />} />
    <Route path={"/login"} element={<Login />} />
    <Route path="dashboard/" element={<DashboardLayout />}>
      <Route path="home" element={<DashboardHome />} />
      <Route path="dashboard" element={<Dashboard />} />
      <Route path="status" element={<MyStatus />} />
      <Route path="account" element={<MyAccount />} />
    </Route>
    <Route path={"*"} element={<NoPageFound />} />
  </Routes>
</BrowserRouter>

Answer 1

Amplify -> App Settings -> Rewrites and redirects

Add this rule;

Source address*:

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

Target address*:

/index.html

Type*:

200 (Rewrite)