Not Found page rendering for an entire page

Question

Below in the App.js file , the routes component wraps part of the website , but i needed the NotFound component to be rendered for the whole page if a wrong url was entered , please advice on how this can be done in this case , i appreciate your feedback

const App = () => {
  return (
    <Box>
      <CssBaseline />
      <Navbar />
      <Routes>
        <Route path="/" element={<Navigate to="/home" />} />
        <Route path="/home" element={<Home />} />
        <Route path="/tours" element={<Tours />} />
        <Route path="/music" element={<Music />} />
        <Route path="/contact" element={<ContactUs />} />
      </Routes>
      <Testimonials />
      <Footer />
    </Box>
  );
};

Answer 1

Use a layout route that renders the Navbar, Testimonials, Footer, and an Outlet for nested Route components to be rendered into. Render the NotFound component outside this layout route.

Read more about layout routes here.

Example:

import { Outlet } from 'react-router-dom';

const App Layout = () => (
  <>
    <Navbar />
    <Outlet /> // <-- nested routes render here
    <Testimonials />
    <Footer />
  </>
);

...

const App = () => {
  return (
    <Box>
      <CssBaseline />
      <Routes>
        <Route element={<AppLayout />}>
          <Route path="/home" element={<Home />} />
          <Route path="/tours" element={<Tours />} />
          <Route path="/music" element={<Music />} />
          <Route path="/contact" element={<ContactUs />} />
        </Route>
        <Route path="/" element={<Navigate to="/home" />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Box>
  );
};

If the NotFound component doesn't need the base CSS styling or Box container then move these into the AppLayout components as well.

Answer 2

You can simply use a wildcard path "*" after all valid routes. In this way it will 1st try to match the current user's path with the path provided inside <Route/> and if the path matches the existing route it will render that route's component. And when it will not match with your existing path then it will render the wildcard route and inside the wildcard route, you can render the 404 Not Found page. For example:

const App = () => {
  return (
    <Box>
      <CssBaseline />
      <Navbar />
      <Routes>
        <Route path="/" element={<Navigate to="/home" />} />
        <Route path="/home" element={<Home />} />
        <Route path="/tours" element={<Tours />} />
        <Route path="/music" element={<Music />} />
        <Route path="/contact" element={<ContactUs />} />
        <Route path="*" element={<NotFoundComponent/>} />
      </Routes>
      <Testimonials />
      <Footer />
    </Box>
  );
};

Note: The <Route path="*"/> should be placed after all existing routes or else your react app will render a 404 page every time

Answer 3

All you have to do is render a Route with a path = " * ", and React Router will make sure to only render the element if none of the other Routes match.

For react-router version 6

<BrowserRouter>
  <Routes>
    <Route path="/" exact element={<Home />}></Route>
    <Route path="*" element={<PageNotFound />}></Route>
  </Routes>
</BrowserRouter>

Show url as 404 of not found page

Redirect component has been removed from the react-router version 6. For react-router-dom v6, simply replace Redirect with Navigate

<Route path="/404" element={<PageNotFound></PageNotFound>} />
<Route path="*" element={<Navigate replace to="/404" />} />