Question 200460 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – React Router Dom v6 – Page Goes Blank after Adding Scroll-to-Top Functionality

I am facing an issue with React Router Dom v6 where my page goes blank after adding the scroll-to-top functionality. I have followed the documentation and tried different approaches, but I couldn’t find a solution. The page renders correctly without the scroll-to-top functionality.

I have created a GitHub repository for my project, which can be found at: https://github.com/AzureCloud9/arch-studio-multipage-website

Here is my App.js code:

import { createBrowserRouter,  Route, createRoutesFromElements, RouterProvider } from "react-router-dom"



//Layout
import RootLayout from "./layout/RootLayout"

//pages
import Home from "./pages/home/Home"
import NotFound from "./pages/NotFound"
import Portfolio from './pages/portfolio/Portfolio'
import ScrollToTop from "./components/ScrollToTop"



const router = createBrowserRouter(
  createRoutesFromElements(
      <Route path='/' element={<RootLayout />}>
        <ScrollToTop/>
        <Route index element={<Home />} />
        <Route path='/portfolio' element={<Portfolio/>}/>
        <Route path='*' element={<NotFound />} />
      </Route>

  ),
  {
    basename: '/arch-studio-multipage-website',
  }
);

function App() {

  return (
    <RouterProvider router={router}/>
  )
}

export default App

and here is my ScrollToTop.js code:

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

const ScrollToTop = () => {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
};

export default ScrollToTop;

I have checked for console errors and tried simplifying the code, but the issue persists. I would appreciate any assistance or guidance in resolving this problem.

Tags:

2

Answers


  1. 0

    The code snippet you provided doesn’t seem to include any sort of scroll-to-top functionality.

    Login or Signup to reply.
  2. 0

    ScrollToTop isn’t a Route component so it can’t be rendered as a child component of a Route. My suggestion would be to import ScrollToTop into the RootLayout component and render it as part of the main app layout.

    Example:

    src/layout/RootLayout.jsx

    import { NavLink, Outlet } from "react-router-dom";
import weblogo from "../assets/logo.svg";
import "./RootLayout.css";
import HamburgerMenu from "../components/HamburgerMenu";
import ScrollToTop from "../components/ScrollToTop";

export default function RootLayout() {
  return (
    <div className="root-layout">
      <ScrollToTop />
      <header>
        <nav>
          <NavLink to="/">
            <img src={weblogo} alt="logo" />
          </NavLink>
          <NavLink to="Portfolio" className="portfolio-link">
            Portfolio
          </NavLink>
          <NavLink to="about" className="about-link">
            About Us
          </NavLink>
          <NavLink to="contact">Contact</NavLink>
        </nav>
        <HamburgerMenu />
      </header>
      <main>
        <Outlet />
      </main>
    </div>
  );
}

    src/App.jsx

    import {
  createBrowserRouter,
  Route,
  createRoutesFromElements,
  RouterProvider
} from "react-router-dom";

// Layout
import RootLayout from "./layout/RootLayout";

// pages
import Home from "./pages/home/Home";
import NotFound from "./pages/NotFound";
import Portfolio from './pages/portfolio/Portfolio';
import About from "./pages/about/About";

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path='/' element={<RootLayout />}>
      <Route index element={<Home />} />
      <Route path='/portfolio' element={<Portfolio />}/>
      <Route path='/about' element={<About />}/>
      <Route path='*' element={<NotFound />} />
    </Route>
  ),
  {
    basename: '/arch-studio-multipage-website',
  }
);

function App() {
  return (
    <RouterProvider router={router} />
  );
}

export default App;

    An alternative would be to convert ScrollToTop into a custom React hook.

    Example:

    import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

const useScrollToTop = () => {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);
};

export default useScrollToTop;

    ...
import useScrollToTop from "../components/useScrollToTop";

export default function RootLayout() {
  useScrollToTop();

  return (
    <div className="root-layout">
      <header>
        <nav>
          <NavLink to="/">
            <img src={weblogo} alt="logo" />
          </NavLink>
          <NavLink to="Portfolio" className="portfolio-link">
            Portfolio
          </NavLink>
          <NavLink to="about" className="about-link">
            About Us
          </NavLink>
          <NavLink to="contact">Contact</NavLink>
        </nav>
        <HamburgerMenu />
      </header>
      <main>
        <Outlet />
      </main>
    </div>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search