1

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!

Improve this question
5
  • What is your project root directory on S3 bucket, is it inside "clinic" folder? Commented Sep 23, 2021 at 6:28
  • If your build is inside "clinic" folder, then this link might be helpful to resolve the issue -stackoverflow.com/questions/49429906/… Commented Sep 23, 2021 at 6: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. Commented Sep 23, 2021 at 6: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. Commented Sep 24, 2021 at 18:05
  • @AlonLaniado were you able to figure this out? I have the same issue. Commented Nov 22, 2022 at 6:31
Related questions
0
Deploying reactJS application - routing issues in production mode
3
Broken routes with react app on S3 hosting using s3_website gem
3
React app routes issue when deployed to AWS
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.