Problem with Hash Router in react-router-dom V6.22.3

kaaya marvin — Fri, 14 Jun 2024 06:50:28 +0000

Hello Dev Community
I'm currently on a React project, I'm facing problems with the hash router ... So currently using react-router-dom V6.22.3 to perform routing functions in the application ... I have used the hash router with a basename

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import "react-toastify/dist/ReactToastify.css";
import App from "./App";
import {  HashRouter } from "react-router-dom";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import store, { persistor } from "./redux/store";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
   <HashRouter basename="/FMS">
      <Provider store={store}>
        <PersistGate loading={"loading ...."} persistor={persistor}>
          <App />
        </PersistGate>
      </Provider>
    </HashRouter>
  </React.StrictMode>
);

then my routes are

import React from "react";
import { Routes, Route } from "react-router-dom";
import Login from "./login";
import Register from "./register";
function App() {
     <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="/register" element={<Register />} />
        <Route path="/" element={<Login />} />
      </Routes>
}

export default App;

when I run npm start the hash symbol isn't added for the beginning route "/" .. the route the application starts with is this http://localhost:3000/FMS instead of http://localhost:3000/#/FMS and a warning/ error <Router basename="/FMS"> is not able to match the URL "/" because it does not start with the basename, so the <Router> won't render anything.... can someone help me understand why it's doing this ... any help will appreciated

DEV Community: kaaya marvin

Problem with Hash Router in react-router-dom V6.22.3