Question

我正在使用使用React Router 4的React应用程序工作。但是，如果我走到不在列表中的路由，那么我的所有路由都工作正常，但我的404页面却收不到。知道我缺少什么吗？

我正在使用React 16和React Router4。这是针对的示例应用程序，例如的确。

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

[UPDATE]：Here，您会找到一个正确的，经过更好测试的示例。

未经测试，但尝试：

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

想法是在Switch内，路由器将尝试从第一个到最后一个的每条路由，直到找到相应的路径。
通过在路由的非常底部中设置<Route component={NotFoundPage} />，并未指定path ，它将用作通配符，捕获所有不匹配的URL。

React Router 4未在找不到的路由上呈现404

1 个答案: