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
Top comments (1)
Hi Kaaya, welcome to DEV 👋!
You might want to add some tags to questions like this, I would suggest #react and #webdev, this will bring it to the attention of those who manage / follow the tags and who are likely to be able to help - good luck!