没有与位置“/admin/home”匹配的路由

vcirk6k6  于 2022-09-21  发布在  React
关注(0)|答案(1)|浏览(161)

我需要重定向到基本名称为‘\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

6ljaweal

6ljaweal1#

为路由器提供basename道具。

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

...

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

相关问题