React Router Dom v6添加滚动到顶部功能后页面空白求助

问题根源 #

你在createRoutesFromElements的<Route>节点下直接嵌套了<ScrollToTop>组件，这违反了React Router v6的核心规则：<Route>的直接子元素只能是其他<Route>组件。非路由组件直接放在这里会破坏路由渲染逻辑，导致页面无法正常渲染，出现空白。

修复方案 #

方法1：将ScrollToTop移入RootLayout组件

这是最直接的解决方式，因为RootLayout作为所有页面的父布局组件，本身就在路由上下文范围内，可以正常使用useLocation钩子。

1. 修改RootLayout.js（示例结构）：

import { Outlet } from 'react-router-dom';
import ScrollToTop from '../components/ScrollToTop';

const RootLayout = () => {
  return (
    <>
      <ScrollToTop />
      {/* 这里保留你原来的RootLayout内容，比如导航栏、页脚等 */}
      <Outlet /> {/* 用于渲染子路由页面的出口 */}
    </>
  );
};

export default RootLayout;

2. 修改App.js，移除路由节点中的<ScrollToTop>：

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'

const router = createBrowserRouter(
  createRoutesFromElements(
      <Route path='/' element={<RootLayout />}>
        <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

方法2：通过路由导航监听实现（可选优化）

如果不想修改布局组件，也可以在创建路由时添加导航事件监听，实现滚动到顶部：

const router = createBrowserRouter(
  createRoutesFromElements(
      <Route path='/' element={<RootLayout />}>
        <Route index element={<Home />} />
        <Route path='/portfolio' element={<Portfolio/>}/>
        <Route path='*' element={<NotFound />} />
      </Route>
  ),
  {
    basename: '/arch-studio-multipage-website',
    // 添加导航完成后的滚动逻辑
    window: {
      ...window,
      scrollTo: (options) => {
        window.scrollTo(options);
      }
    },
    // 监听导航事件
    onNavigate: () => {
      window.scrollTo(0, 0);
    }
  }
);

验证修复 #

修改完成后重启项目，切换路由时页面会自动滚动到顶部，同时页面可以正常渲染，不会出现空白问题。

内容的提问来源于stack exchange，提问作者AzureCloud