React Hash Router v6配置basename后页面空白问题排查与解决

我在React Router 6.8中尝试通过createHashRouter配置basename属性，让应用渲染在/sub/route子路由下，但遇到了页面空白的问题：浏览器打开该路径时，仅显示CSS背景，页面内容完全空白，JS未执行，root div始终为空。

我的路由配置代码如下：

const router = createHashRouter([
   {
      id: 'root',
      path: '/',
      element: <App />,
      errorElement: <ErrorPage />,
      loader: filtersLoader(queryClient),
      children: [
         { path: '/', element: <Navigate to="/dashboard/performance" /> },
         {
            path: '/dashboard',
            id: 'dashboard',
            errorElement: <ErrorPage />,
            loader: dataLoader(queryClient),
            element: (
               <>
                  <Header />
                  <Outlet />
               </>
            ),
            children: [
               { index: true, element: <Index /> }
            ]
         },
         {
            path: 'info',
            element: <Info />
         }
      ]
   }
], {
   basename: '/sub/route'
});

更新/解决方案 #

问题根源是HashRouter与basename属性混用导致的，移除createHashRouter配置中的basename后，页面恢复正常，JS执行正常，root div也能正确渲染内容。

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