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

Technical Issue Reporting
#1

Hi,

When trying to load different routes in my react dapp using react router i get a 404 Not Found
nginx/1.18.0 error.

This error is only happens when deployed to the moralis hosted server.

IS there any moralis docs for integrating routing in react ?

#2

Can you see a way to set redirects? For example when deploying a React and React Router app to Netlify, you need to do a redirect to get the routes to work.

The solution here may be easier to use as well: Deploying a React app with nested routes - Javascript - Moralis Forum

#3

Hi, thanks for the reply.

Will have another look at the question you linked but in their application the routes work when using the application itself, mine doesn’t even get that far in the first place.

Will have a look into the link on redirects also to see if anything there will help.

#4

That is typically what happens; you can navigate to the index component/page and then get to any other routes from the app, but if you go to it manually, it will fail.

So your app can’t even load the default page when deployed?

#5

It loads the home home page fine, its just when trying to navigate to a different route even through the application that i get the 404 error.

return (
      <Router>
        <Container maxW='100%'>
          <Sidebar>
            <Heading align={"center"}>
              Default Election Name
            </Heading>
            <Switch>
              <Route path="/elections" component={Login}>

              </Route>
            </Switch>
          </Sidebar>
        </Container>
      </Router>

Here is how I do the routing inside my App component

NOTE: Login has been placed there for easier testing and loads fine in local

Edit: Is there possibly more I have to do with the path than call just /elections. Unfamiliar with react-router so maybe my setup only works locally

#6

Do you need a <Route exact path... as described here? React Router: Declarative Routing for React.js

I use React Router but am only familiar with v6. Give the HashRouter a try if you haven’t.

#7

Sorry late getting back to this but unfortunately still no luck even after trying HashRoutes. To note I tried to then also build this in Netlify and appear to get an error deploying which seems strange.

#8

What sort of error on Netlify? You should just be able to upload your build folder straight to it e.g. here Netlify Drop | Netlify

#9

Thanks again, didn’t realise I had this option and was trying to build from my repo which gave errors.

Still getting the same 404 not found error but I believe I may have to set up more with redirects in Netlify.

#10

Glad thanks for all the help. Have it working on Netlify.

I had to create a file called _redirects in my projects public folder with the following.

/* /index.html 200

More details in below thread

2 Likes