Как сделать страницу / маршрут "404 - Not Found" с реакции-роутером?

Question

Как мне добавить страницу 404 - Не найдено в React с React-Router?

Вот моя попытка:

// 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

Но я не вижу своих пользовательских " 404 - страница не найдена, когда я go до 'http://localhost: 3000 / ничего ', но <Layout /> компонент.

Что я делаю не так? Пожалуйста, помогите.

Стек: TypeScript, React@v16.13.1, react-router-dom@v5.1.2

---

Решено.

Answer 1

Оставлено пустым path="". Будет отображено 404 страницы.

см. -

<Route path="" component={PageNotFound} />
<Route exact path="/" component={Signin} />
<Route path="/signin" component={Signin} />

Answer 2

404 Страница на реакции не должна иметь путь, так как она должна быть страницей, отображаемой, если маршрут не найден между путями страниц, которые у вас уже есть. Должно работать так:

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