How to make "404 - Not Found" page/route with react-router?

Question

How do I add 404 - Not Found page in React with React-Router?

Here's my attempt:

// routes.tsx

export const routes = [
  {
    path: '/students',
    render: (props: any) => <List {...props} title={`Students`} />,
  },
  {
    path: '/teachers',
    render: (props: any) => <List {...props} title={`Teachers`} />,
  },
]

// App.tsx

import { routes } from './routes'

function App() {
  const routeComponents = routes.map(({ path, render }, key) => (
    <Route exact path={path} render={render} key={key} />
  ))

  return (
    <ThemeProvider theme={theme}>
      <CSSReset />
      <Suspense fallback={<Loader />}>
        <Router>
          <Switch>
            <Route exact path="/" component={Signin} />
            <Route path="/signin" component={Signin} />
            <Layout>{routeComponents}</Layout>
            {/* <Route component={NotFound} /> */}
            <Route path="*" component={NotFound} />
          </Switch>
        </Router>
      </Suspense>
    </ThemeProvider>
  )
}

export default App

But I can't see my custom "404 - Not Found" page when I go to 'http://localhost:3000/nothing', but <Layout /> component.

What I am doing wrong?

Stack: TypeScript, [email protected], [email protected]

Layout isn't a valid child of Switch, only Route and Redirect are. Removing Layout will allow switch to match the 404 route. reacttraining.com/react-router/web/api/Switch — Drew Reese
Thanks @DrewReese. Anyway, is there a way to apply <Layout /> in multiple pages ('/students', '/teachers') without adding in each one of them? — Rario
Moving it outside the Switch but still within the Router should work for you. Is there a reason you have it in the middle of the routes? — Drew Reese
No, there's no particular reason, I just don't want to add <Layout /> in several child components. But I guess I will just do that now. Thanks @DrewReese — Rario

Carlos Saiz Orteu Carlos Saiz Orteu · Accepted Answer · 2020-04-10T20:51:19

404 Page on react does not need to have a path as it needs to be a page rendered when roue is not found between the paths of the pages you already have. It should work this way:

      <Switch>
        <Route exact path="/" component={Signin} />
        <Route path="/signin" component={Signin} />
        {routeComponents()}
        <Route component={NotFound} />
      </Switch>

How to make "404 - Not Found" page/route with react-router?

3 Answers