reactjs - 无法处理 Uncaught TypeError : Cannot read property 'location' of undefined at createRouterReducer

Question

我在将路由器连接到 rootReducer 时遇到问题，控制台日志

Uncaught TypeError: Cannot read property 'location' of undefined at createRouterReducer (reducer.js?005c:9) ...

不知道如何修复它并将路由器连接到 reducer 。

app.jsx


import React from 'react';
import { render } from 'react-dom';
import App from './containers/app'
import {Provider} from 'react-redux'
import {ConnectedRouter} from 'connected-react-router'
import store, {history} from './store'

import './react-select/dist/react-select.css';

render(
    <Provider store={store}>
        <ConnectedRouter history={history}>
            <App />
        </ConnectedRouter>
    </Provider>, document.getElementById('app-root')
);

---

store.js


import { createStore, applyMiddleware, compose } from 'redux'
import { connectRouter, routerMiddleware } from 'connected-react-router'
import thunk from 'redux-thunk'
import rootReducer from './reducers/rootReducer'


var createHistory = require("history").createBrowserHistory
export const history = createHistory()

const initialState = {}
const enhancers = []
const middleware = [
    thunk,
    routerMiddleware(history)
]
.....
const store = createStore(
    connectRouter(history)(rootReducer),
    initialState,
    composedEnhancers
)

export default store

---

reducers/rootReducer.js

import {combineReducers} from 'redux'
import invoices from './invoices'
import customers from './customers'
import products from './products'
import {connectRouter} from 'connected-react-router'
import {history} from '../store'

const rootReducer = combineReducers({
        invoices: invoices,
        customers: customers,
        products: products,
        router: connectRouter(history)
    }
);

export default rootReducer;

---

package.json

{
  "name": "interviewed-react",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "babel-runtime": "^6.26.0",
    "body-parser": "^1.18.3",
    "express": "^4.16.4",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-redux": "^6.0.1",
    "react-router": "^5.0.0",
    "react-router-dom": "^5.0.0",
    "redux": "^4.0.1",
    "sequelize": "^3.34.0",
    "sqlite3": "^4.0.6"
  },
  "devDependencies": {
    "@babel/cli": "^7.4.3",
    "@babel/core": "^7.4.3",
    "@babel/plugin-proposal-class-properties": "^7.4.0",
    "@babel/preset-env": "^7.4.3",
    "@babel/preset-react": "^7.0.0",
    "babel": "^6.23.0",
    "babel-loader": "^8.0.5",
    "babel-plugin-react-transform": "^2.0.0-beta1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-runtime": "^6.3.13",
    "babel-preset-stage-0": "^6.3.13",
    "bootstrap": "^4.3.1",
    "connected-react-router": "^6.3.2",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "html-webpack-plugin": "^3.2.0",
    "jquery": "^3.4.0",
    "react": "^16.8.6",
    "react-bootstrap": "^1.0.0-beta.8",
    "react-dom": "^16.8.6",
    "react-redux": "^6.0.1",
    "react-router": "^5.0.0",
    "react-router-bootstrap": "^0.25.0",
    "react-router-dom": "^5.0.0",
    "react-select": "^2.4.3",
    "react-transform-hmr": "^1.0.1",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0",
    "sqlite3": "^4.0.6",
    "style-loader": "^0.13.1",
    "webpack": "^4.30.0",
    "webpack-dev-middleware": "^3.6.2",
    "webpack-hot-client": "^4.1.1",
    "webpack-hot-middleware": "^2.24.3"
  }
}

期望将路由器连接到rootReducer，但发生错误

Answer 1

历史需要移动到一个单独的文件中。您在 store.js 中创建历史记录，而 store.js 需要 reducer.js，而在 rootReducer.js 中则需要 history。所以 router: connectRouter(history) 在 rootReducer.js 中不会有正确的值

这是一个基于您的代码的工作示例:

https://stackblitz.com/edit/react-1uchhf?file=index.js