我需要重定向到基本名称为‘\admin’的主页。
步骤:
- 我输入URL http://localhost:8080
- 应用重定向至http://localhost:8080/admin/home
预期行为
渲染主视图构件
实际行为
组件未呈现,控制台中出现错误:没有与位置“/admin/home”匹配的路由
我有这样的依赖:
"@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);
我有example
1条答案
按热度按时间6ljaweal1#
为路由器提供
basename
道具。