React router No Match 404 not working when deployed?

Question

I added a No Match 404 error page to my website, and it works fine when I go to the wrong path on localhost, but after I deploy and go to an invalid path like .../invalidpath I get the default netlify page not found error. Below is my App.js component:

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Navigation from './components/navigation/Navigation';
import Home from './pages/home/Home';
import Projects from './pages/projects/Projects';
import Contact from './pages/contact/Contact';
import NoMatch from './pages/404page/404Page';

import './App.scss';

function App() {
  return (
    <div className='app'>
      <Navigation />
      <Switch>
        <Route exact path='/' component={Home} />
        <Route path='/projects' component={Projects} />
        <Route path='/contact' component={Contact} />
        <Route path='*' component={NoMatch} />
      </Switch>
    </div>
  );
}

export default App;

Have you tried not specifying a path for your 404 route? This is the more typical way of defining a 404 route. I don't know if it'll effect netlify however. — Drew Reese
– Drew Reese, Commented Mar 14, 2020 at 23:49

Juan Marco · Accepted Answer · 2022-01-30 17:41:57Z

4

If you've built the app with create-react-app and you're deploying to Netlify, you need to add a _redirects file inside the public directory of your project in order to support client side routing (React Router). It should have this inside:

/*  /index.html  200

Details here. Also, check the official docs from Netlify regarding for Redirects and rewrites

edited Jan 30, 2022 at 17:41

answered Mar 15, 2020 at 1:04

Juan Marco

3,2512 gold badges31 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

notacorn Over a year ago

the website you linked says the file should be called _redirects, however it still doesnt work for me

Juan Marco Over a year ago

Try re-deploying the app to Netlify @notacorn that should publish the latest changes.

notacorn Over a year ago

this was the answer for me stackoverflow.com/a/69901140/8652920

Collectives™ on Stack Overflow

React router No Match 404 not working when deployed?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related