react-router-dom V6 404 route to replace standard components

Question

I have my routes set up using the Outlet from react-router-dom and the affect of getting the single error page is working. However it seem to have broken other aspects of the page. The scrollToTop function will not happen randomly after the page loads once. With the structure I am using do I need to utilize something other than the Outlet or have I structured something else wrong.

I have built my routs like this

useEffect(() => {
    window.addEventListener("scroll", handleScroll)
  }, [showToTop])

  const handleScroll = () => {
    if (window.scrollY > 100) {
      setShowToTop(true)
    } else {
      setShowToTop(false)
    }
  }

const AppLayout = () => (
    <>
      <LoadToTop />
      <Navigation />
      <Outlet />
      {showToTop && <ScrollToTop />}
      <Footer />
    </>
  );

  return (
    <BrowserRouter>

      <Routes>

        <Route element={<AppLayout />} >
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/classrooms" element={<Classrooms />} />
          <Route path="/staff" element={<Staff />} />
        </Route>
        <Route path="*" element={<Navigate to="/404" replace />} />
        <Route path="/404" element={<PageNotFound />} />

      </Routes>



      {isHiringOpen && <HiringModal />}
      {isClassroomOpen && <ClassroomModal currentClassId={currentClassId} />}

    </BrowserRouter>
  )

It seems like maybe I am missing maybe a conditional to tell when to and when not to scroll the page. Because if I remove the outlet and just have the normal routes with nothing nested everything works just fine.

react-router-dom V6 404 route to replace standard components

0 Answers0