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

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

1 голос

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

Uncaught TypeError: Невозможно прочитать свойство 'location' из неопределенного в 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, но возникает ошибка

1 Ответ

0 голосов
/ 11 мая 2019

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

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

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

...