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 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 { 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
