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

【问题标题】：React Router 4 not rendering 404 on routes not foundReact Router 4 未在未找到的路由上呈现 404
【发布时间】：2018-10-01 04:11:07
【问题描述】：

我正在开发一个使用 React Router 4 的 React 应用程序。我的所有路由都运行良好，但是，如果我转到不在列表中的路由，我将无法获得 404 页面。知道我错过了什么吗？

我正在使用 React 16 和 React Router 4。这是针对像 Indeed 这样的示例应用程序。

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>
  )
}

【问题讨论】：

标签： react-router

【解决方案1】：

[更新]：Here 你会找到一个合适的、经过更好测试的示例。

未测试但尝试：

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

这个想法是，在Switch 中，路由器将尝试从第一个到最后一个的每条路由，直到找到相应的路径。
通过将<Route component={NotFoundPage} /> 放在路由的最底部，没有指定path，它将充当通配符，捕获所有不匹配的网址。

【讨论】：