404 when trying to enter a react app route

Question

I just deployed my react app build on c-panel. The app includes different routes and everytime I try to get to one of them I get 404 Not found. For example if I try to get to http://example.com/ it will enter the website, and if I'll press on a button which links me tohttp://example.com/articles it will work. But If I'll try to get http://example.com/articles from a link that I shared or just typing this address I'll get 404 Not found. This is not happening when I'm running the develope mode on localhost.

I changed the homepage url - "homepage": "http://example.com", in package.json and it did not effect.

My app root is wrapped with <Router>

function App() {
  return (
    <Provider store={store}>
      <Router>
        <React.Fragment>
          <CssBaseline />
          <Header title="exampletitle" />
          <MobileHeader />
          <Main />
          <BottomNavbar />
        </React.Fragment>
      </Router>
    </Provider>
  );
}

And this is Main.js component which is maneuvered by the routes.

function Main(props) {
  return (
    <div>
      <Switch>
        <Route exact path="/" component={Homepage} />
        <Route exact path="/about" component={About} />
        <Route exact path="/signup" component={Registerpage} />
        <Route exact path="/ap" component={Adminpage} />
        <Route exact path="/signin" component={SignIn} />
        <Route exact path="/userpanel" component={UserPanelPage} />
        <Route path="/article/:category" component={Articlepage} />
        <Route path="/articlepage/:id" component={ReadArticlePage} />
      </Switch>
    </div>
  );
}

Can someone give me a clue how to make those pages load when I enter them directly by their link?

You have `path="/article/:category"` which is the closest to `articles`. Probably a typo. Or it tries to render the route from the back-end and that's why it is **404**. — norbitrial, May 27 '20 at 16:01
@norbitrial I'm not talking specifically about this route. All the route are doing the same. — SahiBalata, May 27 '20 at 16:19
Probably the back-end tries to look for the route, I have explained a similar scenario [in this answer](https://stackoverflow.com/questions/57648560/problem-on-manual-page-refresh-due-to-params-passed-in-the-url/57648636#57648636), maybe this helps to understand what is happening. — norbitrial, May 27 '20 at 17:16

Ajeet Shah · Accepted Answer · 2020-05-28T10:56:12.667

If your application is working for all the routes when you navigate using <Link> and history.push but throwing 404 Not Found when you type a URL other than http://example.com, say http://example.com/articles, directly in your browser, you need to:

Teach your server to handle 404s by redirecting to the index.html page.

You can do this in one of the following ways:

Add a custom 404 page which redirects you to index.html.
If your hosting solution, c-panel, provides an error page setting for the deployment, provide index.html as the error page.
Use HashRouter from react-router. Check HashRouter Solution and What's HashRouter.

Also, check notes-on-client-side-routing and How to deploy on cPanel.

Here is how to do it on [nginx](https://stackoverflow.com/a/67312778/2873538) and [apache2](https://stackoverflow.com/a/67430478/2873538) servers. — Ajeet Shah, May 07 '21 at 07:20

score 1 · Answer 2 · edited Jan 10 '21 at 09:46

I think I am a bit late ,But the best solution is to : Use HashRouter instead of BrowserRouter and also add a 404.html to public folder with this source code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
    name="viewport"
    content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1, minimum-scale=1"/>
    <title>Your Page Title</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script>
    var path = window.location.pathname;
    path = path[0] + "#" + path;
    var url = window.location.protocol + "//" + window.location.hostname + path;
    //document.write("Redirecting To: "+url);
    window.location.href=url;
    </script>
  </body>
</html>

So now, if you visit http://example.com/articles it will automatically redirect to http://example.com/#/articles almost instantly which you won't even notice and render correctly without any 404 error!!!.

Note: This answer is suitable if you are using github, if you are using cpanel use custom 404 page with above source code.

404 when trying to enter a react app route

2 Answers2

Linked

Related