Question

React：未捕获的类型错误：无法读取未定义的属性（读取‘路径名’）

2022-09-04

8470

reactjs react-redux react-router react-router-dom

我正在重新调整我的路线，但出现错误“ Uncaught TypeError：无法读取未定义的属性（读取'pathname'） ”，我无法解决它，我已经绕了好几个小时。我对 React 还很陌生。我认为我错误地使用了 BrowserRouter、Routes、Router 等有人能帮助我吗？

错误：

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 index.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 。

基本设置：

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

npm install --save redux-first-history

创建自定义历史对象 &配置 Redux 存储

从“redux”导入 {combineReducers};
从“@reduxjs/toolkit”导入 {configureStore};
从“redux-first-history”导入 {createReduxHistoryContext};
从“history”导入 {createBrowserHistory};

const {
createReduxHistory,
routerMiddleware,
routerReducer
} = createReduxHistoryContext({history:createBrowserHistory()});

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

export const history = createReduxHistory(store);

导入并呈现正确的路由器

从“react”导入 React;
从“react-redux”导入 {Provider};
从 'react-router' 导入 {unstable_HistoryRouter 作为 Router};
从 './configureStore' 导入 {store,history};
从 "./App" 导入 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) {
request.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>

Jeheu Dela Cruz

2022-09-06