reactjs - SkapaHashRouter-vägar leder alla till hemsidan. Fungerar bra med BrowserRouter


Jag försöker ladda upp mitt projekt till GitHub Pages. BrowserRouter stöds inte, så jag använde HashRouter istället. Min CreateBrowserRouter-kod fungerar perfekt, men så fort jag ändrar den till CreateHashRouter tar alla vägar mig till startsidan(). Jag märkte att URL:en faktiskt ändras (till exempel om jag klickar på min Portfolio-knapp ändras URL:en till "/Folio"), men den stannar ändå på startsidan.

App

import { GlobalProvider } from './context/GlobalState';
import {
  createHashRouter,
  RouterProvider,
} from "react-router-dom";

const router = createHashRouter(
  [
  {
    path: "/",
    element: <Body/>,
  },
  {
    path: "RMP",
    element: <RMPPage/>
  },
  {
    path: "Folio",
    element: <FolioPage/>
  },
  {
    path: "Compare",
    element: <ComparePage/>
  },
  {
    path: "SubmitPage",
    element: <SubmitPage/>
  },
  {
    path: "RMPSubmit",
    element: <RMPSubmit/>
  },
  {
    path: "FolioEdit",
    element: <FolioEdit/>
  },
  {
    path: "ComparePageOne",
    element: <ComparePageOne/>
  },
  {
    path: "ComparePageTwo",
    element: <ComparePageTwo/>
  }
  
]);

/*
Global provider wrapped
Main App in index.ts (passed as prop here)
*/
function App() {
  return (
    <GlobalProvider>
    <div className="App">
      <RouterProvider router={router}/>
    </div>
    </GlobalProvider>
  );
}

export default App;

Index

import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <App />
);

Här är min webbplats navigeringsfält (huvud)

export let Header = (props:HeaderProps) => {
    return(
        <div className="headerStyle">
            <a className="titleStyle" href="/">{props.title}</a>
            <a className="navBarStyle" href='/folio'> Folio </a>
            <a className="navBarStyle" href='/RMP'> RMP </a>
            <a className="navBarStyle" href='/Compare'> Compare </a>
            <Search/>
        </div>
    )
}

Som jag sa, det fungerar helt perfekt med CreateBrowserRouter och det är den enda koden jag ändrade... CreateBrowserRouter -> CreateHashRouter