Handling "Page not found" using React Router-CodePudding

My App.js component looks like this

    <Switch>
        {loggedIn ?
          <>
            <div>
              <DashboardLayout>
                <Route path="/dashboard" component={Dashboard} />
                <Route path="/my-account" component={Account} />
              </DashboardLayout>
              <Route path="/page-not-found" component={PageNotFound} />
              <Redirect from='*' to='/page-not-found' />

            </div>
          </>
          :
          <PublicRoutes />}
      </Switch>

My dashboardLayout has private routes in it and I want the page-not-found to be shown above it, right now it shows below it.

How can I fix this? Thanks

CodePudding user response：

Per the react-router documentation, children of a Switch must be Route or Redirect.

You should create Routes that render components, not the other way around.

Edit: I'm not sure if React fragments (<></>) are part of that or not. You may want to test that or conditionally render entirely different Switch components/children.