React Routes v6 cannot load pages on Github-page

Question

const router = createBrowserRouter([
  {
    path: "/",
    element: <OutletPage />,
    children: [
      {
        path: "/",
        element: <MainPage />,
        loader: salesLoader
      },
      {
        path: "catalog/:catalogID",
        element: <GoodsPage />,
        loader: goodsLoader,
      },
      {
        path: ":catalog/:goodID",
        element: <GoodPage />,
        loader: goodLoader
      },
      {
        path: 'sign-in',
        element: <SignIn />
      },
      {
        path: 'order',
        element: <Order />
      }
    ]
  }
])

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <HashRouter>
      <RouterProvider router={router} />
    </HashRouter>
  </React.StrictMode>
);

i need to keep loader but createBrowserRouter isn't nessasary. So problem is: when i deployed my app to gh-pages i cannot load any page with 404 error. I searched in the internet what can i do and find a solution like: place <HashRouter> and everything will be all right. BUT! when i did it i got error like You cannot render a <Router> inside another <Router>. You should never have more than one in your app.. I am using React Router v6

Also in my react component Navigation bar i am using this way of navigation <a href='/sign-in' /> but gh-pages not only do not working with another pages, he even can't load main page

I did try remake my routers the old-fashioned way with <Routers> <Route /> <Routers> place <HasRouter />(because github pages doesn't work without it). And my main problem that github pages doesn't work without <HashRoute> but my app do not working with <HashRoute>

score 2 · Accepted Answer · answered Mar 16 '23 at 13:58

Replace createBrowserRouter with createHashRouter
Remove HashRouter

const router = createHashRouter([
  {
    path: "/",
    element: <OutletPage />,
    children: [
      {
        path: "/",
        element: <MainPage />,
        loader: salesLoader
      },
      {
        path: "catalog/:catalogID",
        element: <GoodsPage />,
        loader: goodsLoader,
      },
      {
        path: ":catalog/:goodID",
        element: <GoodPage />,
        loader: goodLoader
      },
      {
        path: 'sign-in',
        element: <SignIn />
      },
      {
        path: 'order',
        element: <Order />
      }
    ]
  }
])

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

If I ever had to die for you, I would do it without hesitation. Thank you! You saved me — 3DMaX, Mar 16 '23 at 14:12
and main joke is... i knew about `createHashRouter` but obviously i am too dumb for connect two dots — 3DMaX, Mar 16 '23 at 14:13

React Routes v6 cannot load pages on Github-page

1 Answers1