Deploying a React app with nested routes

Hello guys,

I have nested routes in my app.

Locally everything works fine.

But when I deploy my app in production, any nested URL returns an HTTP 404 error.
The issue looks very similar to this: https://stackoverflow.com/a/43944719/2435635

From the React documentation, there are tricks to do depending on the server but I do not see anything for nginx, which I belive you use for Moralis :

Any idea?

Hi @akira,

There are many reasons why it might happen but it’s difficult to diagnose without knowing the exact structure of your project and how you’re using react-router. Also, it also depends on how the server accepts these routes and differentiates it between client and server calls.

I agree.
I will create a small project to reproduce the issue and let you know.

@malik I updated the example app from react-moralis.

Of course, it is not ready for a pull request but it demonstrates what I wanted you to see.

There are actually 2 different behaviours, in local and in prod mode.

To reproduce the issue:

  1. git clone https://github.com/sovattha/react-moralis.git
  2. git checkout nesting-test
  3. cd example
  4. update .env

Then this is the test #1 (local URL):

  1. yarn start
  2. browse to localhost:3000
  3. click on the menu Nesting
  4. click on Topics
  5. click on a topic
  6. refresh the page
  7. you get redirected to the default page authentication (which is more or less OK)

Test #2 (remote URL):

  1. yarn deploy
  2. browse to the deployed website url
  3. click on the menu Nesting
  4. click on Topics
  5. click on a topic
  6. refresh the page
  7. you get a 404 error (which is clearly not OK)

Source code:

A react moralis example app has been deployed here to show the bug:
https://3cdty8l0g5cn.moralis.io/topics/rendering

If you access it through the root https://3cdty8l0g5cn.moralis.io/ then browse to any nested route, it works fine, but as soon as you refresh the page, you get a blank page.

Hey @akira

You can use HashRouter to fix the issue.
In you index.tsx file (example/src):

import { HashRouter } from "react-router-dom";
ReactDOM.render(
    <React.StrictMode>
        <HashRouter>
            <ChakraProvider theme={theme}>
                <MoralisProvider appId={appId} serverUrl={serverUrl}>
                    <App />
                </MoralisProvider>
            </ChakraProvider>
        </HashRouter>
    </React.StrictMode>,
    document.getElementById("root"),
);

You will be able to refresh your page without getting 404.

Happy coding,
Dani

It looks simple indeed.

But then do I need to change my links somehow?

I deployed the new solution and when I browse to Nesting, I get there: https://3cdty8l0g5cn.moralis.io/#/nesting

If I refresh the page, it works fine of course.

But then if I click on a link, let’s say Topics, the URL becomes https://3cdty8l0g5cn.moralis.io/topics.
Of course, if I refresh the page here, I get a 404 error.

Ok I think I simply did not change any reference from BrowserRouter to HashRouter :slight_smile: