React Router 4 не рендерит 404 на не найденных маршрутах

Question

Я работаю над приложением React, которое использует React Router 4. Все мои маршруты работают отлично, однако, если я иду по маршруту, которого нет в списке, я не получаю свою страницу 404.Есть идеи, что мне не хватает?

Я использую React 16 и React Router 4. Это для примера приложения, такого как Действительно.

export default function App() {
  const companyRoutes = () => (
    <Main>
      <Route exact path="/companies/new" component={NewCompanyPage} />
      <SubNav>
        <PageBody companyPages>
          <Switch>
            <Route exact path="/companies" component={CompanyPage} />
            <Route path="/companies/:companyId/edit" component={EditCompanyPage} />
            <Route path="/companies/:companyId/jobs/:jobId/edit" component={EditJobPage} />
            <Route path="/companies/:companyId/jobs/new" component={NewJobPage} />
            <Route path="/companies/:companyId/jobs" component={CompanyJobsPage} />
            <Route path="/companies/:companyId/locations" component={CompanyLocationsPage} />
            <Route path="/companies/:companyId/recruiters" component={CompanyRecruitersPage} />
            <Route path="/companies/:companyId/settings" component={CompanySettingsPage} />
            <Route path="/companies/:companyId/applicants" component={CompanyApplicantsPage} />
          </Switch>
        </PageBody>
      </SubNav>
    </Main>
  )

  const jobRoutes = () => (
    <Main>
      <PageBody>
        <Switch>
          <Route exact path="/jobs" component={JobsPage} />
          <Route path="/jobs/:jobId" component={JobPage} />
          <Route path="/jobs/:jobId/apply" component={NewApplicationPage} />
        </Switch>
      </PageBody>
    </Main>
  )

  const profileRoutes = () => (
    <Main>
      <SubNav>
        <PageBody>
          <Switch>
            <Route exact path="/profiles" component={ProfilePage} />
            <Route path="/profiles/:profileId/resume" component={ResumePage} />
            <Route path="/profiles/:profileId/edit" component={EditProfilePage} />
            <Route path="/profiles/:profileId/applications" component={ApplicationsPage} />
            <Route path="/profiles/:profileId/settings" component={ProfileSettingsPage} />
          </Switch>
        </PageBody>
      </SubNav>
    </Main>
  )

  const loginRoutes = () => (
    <LoginMain>
      <Switch>
        <Route exact path="/login" component={LoginPage} />
        <Route exact path="/sign_up" component={LoginPage} />
      </Switch>
    </LoginMain>
  )

  const MainRoutes = () => (
    <div>
      <Route path="/companies" component={companyRoutes} />
      <Route path="/jobs" component={jobRoutes} />
      <Route path="/login" component={loginRoutes} />
      <Route path="/profiles" component={profileRoutes} />
    </div>
  )

  return (
    <BrowserRouter>
      <div>
        <Route path="/" component={MainRoutes} />
        <Route path="/404" component={NotFoundPage} />
      </div>
    </BrowserRouter>
  )
}

Answer 1

[ОБНОВЛЕНИЕ]: Здесь вы найдете правильный, более проверенный пример.

Не проверено, но попробуйте:

return (
    <BrowserRouter>
      <Switch>
        <Route path="/" component={MainRoutes} />
        <Route component={NotFoundPage} />
      </Switch>
    </BrowserRouter>
)

Идея состоит в том, что внутриSwitch, маршрутизатор будет пробовать каждый маршрут от первого до последнего, пока не найдет соответствующий путь.
Имея <Route component={NotFoundPage} /> в самом низу вашей маршрутизации, без указания path , он будет действовать как подстановочный знак, перехватывая все несопоставленные URL.