No routes matched location "/admin/home"

Question

I need redirect to page home with basename '\admin'.

Steps:

• I enter url http://localhost:8080
• app redirect to http://localhost:8080/admin/home

Expected Behavior

render home component

Actual Behavior

Component isn't render and error in console: No routes matched location "/admin/home"

I have such dependencies:

    "@reduxjs/toolkit": "1.8.5",
    "history": "5.3.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-redux": "8.0.2",
    "react-router-dom": "6.4.0",
    "react-scripts": "4.0.0",
    "redux": "4.2.0",
    "redux-first-history": "5.1.1",
    "redux-saga": "1.2.1"

index.js

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { Provider } from "react-redux";
import { HistoryRouter } from "redux-first-history/rr6";

import App from "./App";
import { history, store } from "./store";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <Provider store={store}>
      <HistoryRouter history={history}>
        <App />
      </HistoryRouter>
    </Provider>
  </StrictMode>
);

app.js

import { Navigate, Route, Routes } from "react-router-dom";
import About from "./About";
import Home from "./Home";
import "./styles.css";

export default function App() {
  return (
    <Routes>
      <Route path="/" element={<Navigate to="/home" replace />} />
      <Route path="/home" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  );
}

store.js

import { combineReducers } from "redux";
import { configureStore } from "@reduxjs/toolkit";
import { createReduxHistoryContext } from "redux-first-history";
import { createBrowserHistory } from "history";

const {
  createReduxHistory,
  routerMiddleware,
  routerReducer
} = createReduxHistoryContext({
  history: createBrowserHistory(),
  basename: "/admin"
});

export const store = configureStore({
  reducer: combineReducers({
    router: routerReducer
  }),
  middleware: [routerMiddleware]
});

export const history = createReduxHistory(store);

I have example

Answer 1

Provide a basename prop to the router.

import { HistoryRouter } from "redux-first-history/rr6";

...

<HistoryRouter history={history} basename="/admin">
  <App />
</HistoryRouter>