CODEWITHSUNDEEP
react-router
Alysia Lynn
Alysia Lynn

Reputation: 41

React Router 4 not rendering 404 on routes not found

I'm working on a React app that is using React Router 4. All of my routes are working great, however, if I go to a route that is not on the list I am not getting my 404 page. Any idea what I'm missing?

I'm using React 16 and React Router 4. This is for a sample app like 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>
  )
}

Upvotes: 1

Views: 781

Answers (1)

Sifnos
Sifnos

Reputation: 1171

[UPDATE]: Here you will find a proper, better tested example.

Not tested but try:

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

The idea is that inside a Switch, the router will try every route from the first one to the last one until it finds a corresponding path.
By having <Route component={NotFoundPage} /> at the very bottom of your routing, with no path specified, it will act as a wildcard, catching all unmatched urls.

Upvotes: 1

Related Questions