反應：未捕獲的類型錯誤：無法讀取未定義的屬性（讀取“路徑名”）

Question

我正在重新調整我的路線，但出現錯誤“ Uncaught TypeError: Cannot read properties of undefined (reading 'pathname') ”，我無法解決它，我已經轉了幾個小時。 我對反應還很陌生。 我想我錯誤地使用了 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.

語音索引.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>)
);

應用程序.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

而不是使用

<BrowserRouter> 

嘗試使用

<Router> 

Answer 2

不幸的是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. 創建自定義歷史記錄 object 並配置 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 { 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> </> ); } }