反应：未捕获的类型错误：无法读取未定义的属性(读取"路径名")

Question

我正在重新调整路线，但出现了一个错误"CCD_ 1"；我解决不了它，我已经绕了好几个小时了。我还没反应过来。我认为我使用浏览器路由器，路由，路由器不正确等有人能帮我吗？

错误：

components.tsx:197 Uncaught TypeError: Cannot read properties of undefined (reading 'pathname')
at Router (components.tsx:197:1)
at renderWithHooks (react-dom.development.js:16305:1)
at mountIndeterminateComponent (react-dom.development.js:20074:1)
at beginWork (react-dom.development.js:21587:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at beginWork$1 (react-dom.development.js:27451:1)
at performUnitOfWork (react-dom.development.js:26557:1)
at workLoopSync (react-dom.development.js:26466:1)
react-dom.development.js:18687 The above error occurred in the <Router> component:

at Router (http://localhost:3000/static/js/bundle.js:108514:15)
at ConnectedRouter (http://localhost:3000/static/js/bundle.js:53802:7)
at ConnectedRouterWithContext (http://localhost:3000/static/js/bundle.js:53925:25)
at ConnectFunction (http://localhost:3000/static/js/bundle.js:104929:114)
at Provider (http://localhost:3000/static/js/bundle.js:104640:5)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

Voici索引.js：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux'
import {Route, Routes} from 'react-router'
import { ConnectedRouter } from 'connected-react-router'
import App from "./App";
import { store, history } from './configureStore'
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
(<Provider store={store}>
<ConnectedRouter history={history}>
<Routes>
<Route path="/" component={App}/>
</Routes>
</ConnectedRouter>
</Provider>)
);

App.js:

import React from 'react';
import {requests} from "./agent";
import Navigation from "./components/Navigation";
import {Route, Routes} from "react-router";
import HomePage from "./Pages/HomePage";
import LoginPage from "./Pages/LoginPage";
import RegisterPage from "./Pages/RegisterPage";
import Dashboard from "./Pages/Dashboard";
import News from "./Pages/News";
import Missions from "./Pages/Missions";
import Associations from "./Pages/Associations";
import {BrowserRouter} from "react-router-dom";
class App extends React.Component{
constructor(props) {
super(props);
const token = window.localStorage.getItem('jwtToken');
if(token) {
requests.setToken(token)
}
}
render() {
return (
<BrowserRouter>
<Navigation  />
<Routes>
<Route path='/' element={<HomePage />}/>
<Route path='/login' element={<LoginPage />}/>
<Route path='/register' element={<RegisterPage />}/>
</Routes>
</BrowserRouter>
)
}
}
export default App;

Answer 1

不幸的是，connected-react-router尚未更新为与react-router-dom@6兼容，作者也未处于活动状态。connected-react-router似乎是一个死项目。我发现一个同样有效的替代品(IMO(是redux-first-history。

基本设置：

1. 将redux-first-history添加到项目中。

   npm install --save redux-first-history

2. 创建自定义历史记录对象&配置Redux存储

   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() });
   export const store = configureStore({
   reducer: combineReducers({
   router: routerReducer
   }),
   middleware: [routerMiddleware]
   });
   export const history = createReduxHistory(store);
   

3. 导入并呈现正确的路由器

   import React from "react";
   import { Provider } from "react-redux";
   import { unstable_HistoryRouter as Router } from 'react-router';
   import { store, history } from './configureStore';
   import App from "./App";
   const root = ReactDOM.createRoot(document.getElementById('root'))
   root.render(
   <Provider store={store}>
   <Router history={history}>
   <App />
   </Router>
   </Provider>
   );
   

   class App extends React.Component{
   constructor(props) {
   super(props);
   const token = window.localStorage.getItem('jwtToken');
   if (token) {
   requests.setToken(token)
   }
   }
   render() {
   return (
   <>
   <Navigation  />
   <Routes>
   <Route path='/' element={<HomePage />}/>
   <Route path='/login' element={<LoginPage />}/>
   <Route path='/register' element={<RegisterPage />}/>
   </Routes>
   </>
   );
   }
   }
   

此解决方案可能无法与新的RRDv6.4数据API配合使用

Answer 2

而不是使用

<BrowserRouter> 

尝试使用

<Router>