“Page Not Found” error on Netlify while using React Router causing trouble? We have a solution.

At Bobcares, we offer solutions for every query, big and small, as a part of our Server Management Service.

Let’s take a look at how our Support Team recently helped out a customer with the “Page Not Found” error on Netlify.

All about the “Page Not Found” error on Netlify while using React Router

Deploying SPAs are very easy with Netlify. Single-page applications or SPAs are extremely useful as they perform page routing on the client-side. In other words, SPAs perform page routing via the browser. Ultimately, this means that there is no extra wait time or page reloads, creating a better experience for the user.

However, we have to explicitly tell Netlify how to handle React Router routes in order for it to function seamlessly. For instance, suppose the following React code is a part of our App.js file:

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

const Home = () => <h1>Home!</h1>;
const About = () => <h1>About!</h1>;
const App = () => (
  <Router>
    <div>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
        </ul>
      </nav>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </div>
  </Router>
);

ReactDOM.render(<App >, document.querySelector("#root"));
ReactDOM.render(, document.querySelector("#root"));

In this particular routing problem, we have two pages on the site: / as well as /about.

We will be able to access somedomain.netlify.app by deploying Netlify as it accesses it via the / route.

Furthermore, we can also navigate via the <nav> element to

somedomain.netlify.app/about

However, when we enter somedomain.netlify.app/about directly in the browser’s URL bar, we will wind up with the infamous Page Not Found error as seen below:

Page Not Found
Looks like you've followed a broken link or entered
a URL that doesn't exist on this site.

How to resolve the “Page Not Found” error on Netlify while using React Router

According to our Support Engineers, we can resolve the issue easily by adding _redirects file to the root folder. In other words, all we have to do is create a file called _redirects in the /public folder with the following code:

/*    index.html   200

As a result, we will reroute everything back to the index.html where the routing takes place on the client-side.

[Looking for a solution to another query? We are just a click away.]

Conclusion

In short, the skilled Support Engineers at Bobcares demonstrated how to resolve “Page Not Found” error on Netlify.