Не может справиться с Uncaught TypeError: Невозможно прочитать свойство 'location' из undefined в createRouterReducer

61
5

У меня проблема с подключением роутера к rootReducer, логи консоли

Uncaught TypeError: Невозможно прочитать свойство 'location' undefined в createRouterReducer (reducer.js? 005c: 9)...

Не знаю, как это исправить и подключить роутер к редуктору.

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

редукторы /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, но возникает ошибка

спросил(а) 2021-01-19T17:23:47+03:00 2 месяца, 3 недели назад
1
Решение
107

Историю нужно перенести в отдельный файл. Вы создаете историю в store.js, в то время как store.js требует reducer.js и в rootReducer.js история обязательна. Так что router: connectRouter(history) не будет иметь правильное значение в rootReducer.js

Вот рабочий пример, основанный на вашем коде:

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

ответил(а) 2021-01-19T17:23:47+03:00 2 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема