0

I've hosted my React app on AWS S3, and I'm having trouble with deep paths routing.

domain.com/one : success
domain.com/one/two : fail

My routes (partial):

<Suspense fallback={<p>LOADING...</p>}>
    <Switch>
        <Route exact path="/">
            <Redirect to="/clinic"/>
        </Route>
        <Route exact path="/login" component={Login}/>
        <Route exact path="/404" component={PageNotFound}/>
        <Route exact path="/clinic/patients" component={ClinicPatients}/>
        <Route exact path="/clinic/help" component={HelpCenter}/>
        <Route exact path="/clinic" component={ClinicDashboard} />

        <Redirect to="/404"/>
    </Switch>
</Suspense>

Routing results:

https://my-website-name.s3-website-eu-west-1.amazonaws.com/ - OK. redirected to /clinic

https://my-website-name.s3-website-eu-west-1.amazonaws.com/clinic - OK. opens page /clinic

https://my-website-name.s3-website-eu-west-1.amazonaws.com/clinic/ - PROBLEM. 404 not found. blank page, no redirection. (Only difference is the '/' at the end)

https://my-website-name.s3-website-eu-west-1.amazonaws.com/route-that-doesnt-exist - OK. redirected to /404

https://my-website-name.s3-website-eu-west-1.amazonaws.com/clinic/patients - PROBLEM. 404 page not found (although it exists). blank page, no redirection.

https://my-website-name.s3-website-eu-west-1.amazonaws.com/one/two - PROBLEM. 404 page not found (doesn't exist). blank page, no redirection.

blank page 404 err: 404 error

My static web hosting preferences: static web hosting preferences

As you can see, deep path will not work for some reason. Would appreciate any help.

Thanks!

Alon Laniado
  • 558
  • 7
  • 16
  • What is your project root directory on S3 bucket, is it inside "clinic" folder? – Sachin Vairagi Sep 23 '21 at 06:28
  • If your build is inside "clinic" folder, then this link might be helpful to resolve the issue -https://stackoverflow.com/questions/49429906/how-should-i-configure-create-react-app-to-serve-app-from-subdirectory – Sachin Vairagi Sep 23 '21 at 06:34
  • @SachinVairagi the /clinic prefix is only the route displayed for the user. the project resides inside the root folder, and all paths entered by user should be handled by react-router. – Alon Laniado Sep 23 '21 at 06:35
  • @AlonLaniado Basically your redirection rule tells to replace key prefix with #/ when error 403 is met. I believe in your case you should try to handle error 404 as well. Please try to add the same rule for error code 404 and check whether it resolves the problem. – Artyom Sokolov Sep 24 '21 at 18:05

0 Answers0