Why doesn't render component? react-router-dom v6.4.0 history v5.3.0
LexaDel opened this issue · 1 comments
LexaDel commented
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
salvoravida commented
#95. duplicate