Home
Support Forums

Redirect to custom error page not working

Site: https://davidronnlidmovies.netlify.app

I’m having trouble redirecting a user to a custom error page when the user somehow arrives at a URL for which there is no page content.

This is the error message the user gets.
image

I want to design an error message that is more compatible design-wise with the rest of the UI in the app. The custom solution works in localhost, but the default Netlify error page is returned to the user even though the custom error page works locally.

The custom error page routing is implemented with React Router:

<Route exact path="/movies/:movieId" component={SingleMoviePage} />
          <Route exact path="/about" component={About} />

          <Route path="*" component={ErrorMessage} />
        </Switch>
      </div>
    </Router>

Happy to clarify any details if needed. Thanks in advance for the help.

Which is exactly why it won’t work. Netlify needs and serves static HTML file, but React Router relies on JavaScript to render the page on the client-side. It doesn’t create a separate index.html page. You need to add a redirect rule like:

/* /index.html 200

Ah. I see. Thank you. Does that mean it’s entirely impossible to use a React component for the error message? I want this to be the error page:

So upon URL errors I want the header and styles, created with React and CSS, to stay the same, but want to change the page body content.

Thanks

Did you try adding this rule instead of the one you have?

P.S.: You seem to have a lot of images of various movie posters. This can be considered as a copyright infringement and if your site is reported in the future, we might have to take it down. It’s better to not use such images unless you’ve a permission to do so.

Thank you very much. It worked excellently. And thank you for the heads up about the copyright infringement risk.