My Landing page displays fine until I encapsulate it within a Route, The Heading still loads as expected, but even the * page doesn't work.

export default function App() {
  return (
    <>
      <Header />
      <Routes>
        <Route path="/" component={Landing} exact />
        <Route path="*" component={PageNotFound} exact />
      </Routes>
    </>
  );
}

CodePudding user response：

Try using the element prop as follows:

export default function App() {
  return (
    <>
      <Header />
      <Routes>
        <Route path="/" element={<Landing />} exact />
        <Route path="*" element={<PageNotFound />}} exact />
      </Routes>
    </>
  );
}