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