Deploying a React app with nested routes

Moralis General
#1

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?

#2

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.

#3

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

#4

@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:

#5

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.

#6

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

#7

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.

[SOLVED] 404 Not Found when trying to load route for react project
#8

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

#9

Routers in React App Development assist in the creation and navigation of the various URLs that comprise your web application. They enable your user to navigate between your app’s components while preserving user state, and they can provide unique URLs for these components to make them more shareable. You can improve the user experience of your app by simplifying site navigation with routers. Steps 1:nstalling React Router is the first . Step 2: Add Routes Step 3 — Using Hooks to Access Route Data