Reactjs React-redux路由器迁移到连接React路由器
我从中构建项目 并尝试升级依赖项 然后我犯了这个错误。 我遵循“连接反应路由器指南”设置,然后发生了此错误。 创建减速器时发生此错误, 初始减速器时,该方法将Unfind ibj传递给减速器方法 那么历史记录的createHref需要从这个obj获取路径名 这个错误发生了 谁能给点建议?也许是依赖问题 错误堆栈 未捕获的TypeError:无法读取未定义的属性“pathname” 在createPath(history.js:70) 在createHref(history.js:366) 评估时(redux.js:361) 在Array.forEach()处 在assertReducerShape(redux.js:359) at组合传感器(redux.js:422) 在createReducer(reducers.js?9c0a:11) 在configureStore(configureStore.js?2ddb:35) at Module.eval(index.js?7df2:24) 评估时(索引js:109) reducer.jsReactjs React-redux路由器迁移到连接React路由器,reactjs,redux,react-redux,react-router,react-router-redux,Reactjs,Redux,React Redux,React Router,React Router Redux,我从中构建项目 并尝试升级依赖项 然后我犯了这个错误。 我遵循“连接反应路由器指南”设置,然后发生了此错误。 创建减速器时发生此错误, 初始减速器时,该方法将Unfind ibj传递给减速器方法 那么历史记录的createHref需要从这个obj获取路径名 这个错误发生了 谁能给点建议?也许是依赖问题 错误堆栈 未捕获的TypeError:无法读取未定义的属性“pathname” 在createPath(history.js:70) 在createHref(history.js:366) 评估时
import { combineReducers } from 'redux'
import { connectRouter } from 'connected-react-router'
import formReducer from 'redux-form/es/reducer'
import { loadingBarReducer } from 'react-redux-loading-bar'
import securityReducer from 'security/reducer'
import flashReducer from 'site/reducers/flash'
const createReducer = (injectedReducers) => combineReducers({
router: connectRouter(injectedReducers),
security: securityReducer,
flash: flashReducer,
form: formReducer,
loadingBar: loadingBarReducer,
...injectedReducers,
})
export default createReducer
configureStore.js
import { applyMiddleware, compose, createStore } from 'redux'
import { routerMiddleware } from 'connected-react-router'
import { connectRouter } from 'connected-react-router'
import { loadingBarMiddleware } from 'react-redux-loading-bar'
import createSagaMiddleware from 'redux-saga'
import createReducer from 'reducers'
import getSagas from 'sagas'
import { flashClearMiddleware } from 'site/middleware/flash'
const isDev = process.env.NODE_ENV !== 'production'
const hasWindowObject = typeof window === 'object'
const sagaMiddleware = createSagaMiddleware()
export default function configureStore(initialState, history) {
const middlewares = [
sagaMiddleware,
routerMiddleware(history),
loadingBarMiddleware({ promiseTypeSuffixes: ['REQUEST', 'FULFILL'] }),
flashClearMiddleware,
]
const enhancers = [
applyMiddleware(...middlewares),
]
const composeEnhancers =
isDev && hasWindowObject && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
: compose
const store = createStore(
createReducer(history),
initialState,
composeEnhancers(...enhancers)
)
// extensions
store.runSaga = sagaMiddleware.run
store.injectedReducers = {}
store.injectedSagas = {}
let runningSagas = sagaMiddleware.run(function *() {
yield getSagas()
})
if (module.hot) {
module.hot.accept('./reducers', () => {
const nextCreateReducer = require('./reducers').default
store.replaceReducer(connectRouter(history)(nextCreateReducer(store.injectedReducers)))
})
module.hot.accept('./sagas', () => {
const nextGetSagas = require('./sagas').default
runningSagas.cancel()
runningSagas.done.then(() => {
runningSagas = sagaMiddleware.run(function *() {
yield nextGetSagas()
})
})
})
}
return store
}
这是我的附件
"dependencies": {
"@babel/polyfill": "7.4.3",
"@hot-loader/react-dom": "^16.8.6",
"acorn": "^6.4.1",
"babel-polyfill": "^6.26.0",
"chalk": "2.4.2",
"classnames": "^2.2.6",
"compression": "1.7.4",
"connected-react-router": "^6.8.0",
"core-js": "^3.6.4",
"date-fns": "^2.11.0",
"fontfaceobserver": "2.1.0",
"history": "4.9.0",
"hoist-non-react-statics": "3.3.0",
"immer": "3.0.0",
"immutable": "^3.8.2",
"intl": "1.2.5",
"invariant": "2.2.4",
"ip": "1.1.5",
"isomorphic-fetch": "^2.2.1",
"js-cookie": "^2.2.1",
"lodash": "^4.17.15",
"minimist": "^1.2.5",
"normalize.css": "^8.0.1",
"path-to-regexp": "^6.1.0",
"prop-types": "15.7.2",
"query-string": "^6.11.1",
"react": "16.8.6",
"react-bulma-components": "^3.2.0",
"react-dom": "16.8.6",
"react-helmet": "6.0.0-beta",
"react-highlight": "^0.12.0",
"react-intl": "2.8.0",
"react-loadable": "^5.5.0",
"react-redux": "^7.2.0",
"react-redux-loading-bar": "^4.6.0",
"react-router-dom": "5.0.0",
"react-svg": "^11.0.14",
"redux": "4.0.1",
"redux-form": "^8.2.3",
"redux-saga": "1.0.2",
"reselect": "4.0.0",
"sanitize.css": "8.0.0",
"seamless-immutable": "^7.1.4",
"styled-components": "4.2.0",
"utf-8-validate": "^5.0.2",
"warning": "^4.0.3"
},
"devDependencies": {
"@types/react": "^16.9.23",
"add-asset-html-webpack-plugin": "3.1.3",
"canvas": "^2.6.1",
"circular-dependency-plugin": "5.0.2",
"compare-versions": "3.4.0",
"compression-webpack-plugin": "2.0.0",
"coveralls": "3.0.3",
"css-loader": "2.1.1",
"eslint": "5.16.0",
"eslint-config-airbnb": "17.1.0",
"eslint-config-airbnb-base": "13.1.0",
"eslint-config-prettier": "4.1.0",
"eslint-import-resolver-webpack": "0.11.1",
"eslint-plugin-import": "2.17.2",
"eslint-plugin-jsx-a11y": "6.2.1",
"eslint-plugin-prettier": "3.0.1",
"eslint-plugin-react": "7.12.4",
"eslint-plugin-react-hooks": "1.6.0",
"eslint-plugin-redux-saga": "1.0.0",
"express": "^4.17.1",
"express-http-proxy": "^1.6.0",
"fibers": "^4.0.2",
"file-loader": "3.0.1",
"html-loader": "0.5.5",
"html-webpack-plugin": "3.2.0",
"image-webpack-loader": "4.6.0",
"imports-loader": "0.8.0",
"jest-cli": "24.7.1",
"jest-dom": "3.1.3",
"jest-styled-components": "^6.3.4",
"jsdom": "^16.2.1",
"json-loader": "^0.5.7",
"lint-staged": "8.1.5",
"ngrok": "3.1.1",
"node-plop": "0.18.0",
"node-sass": "^4.13.1",
"null-loader": "0.1.1",
"offline-plugin": "5.0.6",
"plop": "2.3.0",
"pre-commit": "1.2.2",
"prettier": "1.17.0",
"react-app-polyfill": "0.2.2",
"react-hot-loader": "^4.12.20",
"react-test-renderer": "16.8.6",
"react-testing-library": "6.1.2",
"redbox-react": "^1.6.0",
"resolve-url-loader": "^3.1.1",
"rimraf": "2.6.3",
"sass": "^1.26.3",
"sass-loader": "^8.0.2",
"shelljs": "0.8.3",
"style-loader": "0.23.1",
"stylelint": "10.0.1",
"stylelint-config-recommended": "2.2.0",
"stylelint-config-styled-components": "0.1.1",
"stylelint-processor-styled-components": "1.6.0",
"svg-url-loader": "2.3.2",
"terser-webpack-plugin": "1.2.3",
"url-loader": "1.1.2",
"webpack": "^4.42.1",
"webpack-bundle-analyzer": "^3.6.1",
"webpack-cli": "3.3.0",
"webpack-dev-middleware": "3.6.2",
"webpack-hot-middleware": "2.24.3",
"webpack-pwa-manifest": "^4.2.0",
"whatwg-fetch": "3.0.0"
}
index.js
import 'babel-polyfill'
// this must come before everything else otherwise style cascading doesn't work as expected
import 'main.scss'
import { AppContainer as HotReloadContainer } from 'react-hot-loader'
import { areComponentsEqual } from 'react-hot-loader';
import React from 'react'
import ReactDOM from 'react-dom'
import {createBrowserHistory} from 'history'
import configureStore from 'configureStore'
import App from 'components/App'
import { login } from 'security/actions'
import { flashInfo } from 'site/actions'
import SecurityApi from 'security/api'
import { storage } from 'utils'
const APP_MOUNT_POINT = document.getElementById('app')
const initialState = {}
const history = createBrowserHistory()
const store = configureStore(initialState, history)
const renderRootComponent = (Component) => {
ReactDOM.render(
<HotReloadContainer>
<Component store={store} history={history} />
</HotReloadContainer>,
APP_MOUNT_POINT
)
}
const token = storage.getToken()
store.dispatch(login.request())
SecurityApi.checkAuthToken(token)
.then(({ user }) => {
store.dispatch(login.success({ token, user }))
})
.catch(() => {
store.dispatch(login.failure())
})
.then(() => {
store.dispatch(login.fulfill())
renderRootComponent(App)
const isAuthenticated = store.getState().security.isAuthenticated
const alreadyHasFlash = store.getState().flash.visible
if (isAuthenticated && !alreadyHasFlash) {
store.dispatch(flashInfo('Welcome back!'))
}
})
if (module.hot) {
module.hot.accept('./components/App.js', () => {
ReactDOM.unmountComponentAtNode(APP_MOUNT_POINT)
const NextApp = App.default
areComponentsEqual(NextApp)
renderRootComponent(NextApp)
})
}
导入“babel polyfill”
//这必须放在其他事情之前,否则样式级联无法按预期工作
导入“main.scss”
从“react hot loader”导入{AppContainer as HotReloadContainer}
从“react hot loader”导入{areComponentsEqual};
从“React”导入React
从“react dom”导入react dom
从“历史记录”导入{createBrowserHistory}
从“configureStore”导入configureStore
从“组件/应用程序”导入应用程序
从“安全/操作”导入{login}
从“站点/操作”导入{flashInfo}
从“安全/api”导入SecurityApi
从“utils”导入{storage}
常量APP\u MOUNT\u POINT=document.getElementById('APP')
常量initialState={}
const history=createBrowserHistory()
常量存储=配置存储(初始状态、历史)
const renderRootComponent=(Component)=>{
ReactDOM.render(
,
安装点
)
}
const token=storage.getToken()
store.dispatch(login.request())
SecurityApi.checkAuthToken(令牌)
。然后({user})=>{
store.dispatch(login.success({token,user}))
})
.catch(()=>{
store.dispatch(login.failure())
})
.然后(()=>{
store.dispatch(login.fulfill())
renderRootComponent(应用程序)
const isAuthenticated=store.getState().security.isAuthenticated
const alreadyHasFlash=store.getState().flash.visible
如果(已验证&!alreadyHasFlash){
store.dispatch(flashInfo(“欢迎回来!”)
}
})
如果(模块热){
module.hot.accept('./components/App.js',()=>{
ReactDOM.unmountComponentAtNode(应用程序安装点)
const nextap=App.default
areComponentsEqual(下一个TAPP)
renderRootComponent(下一个TAPP)
})
}
App.js
import React from 'react'
import { Provider } from 'react-redux'
import { ConnectedRouter } from 'connected-react-router'
import Helmet from 'react-helmet'
import { history } from './index'
import { NavBar, ProgressBar } from 'components'
import { SITE_NAME, COPYRIGHT } from 'config'
import Routes from 'routes'
const AppLayout = () => (
<div className="fixed-nav-top">
<Helmet titleTemplate={`%s - ${SITE_NAME}`}
defaultTitle={SITE_NAME}
/>
<ProgressBar />
<header>
<NavBar />
</header>
<main>
<Routes />
</main>
<footer className="center">
Copyright {new Date().getFullYear()} {COPYRIGHT}
</footer>
</div>
)
export default (props) => (
<Provider store={props.store}>
<ConnectedRouter history={history}>
<AppLayout />
</ConnectedRouter>
</Provider>
)
从“React”导入React
从“react redux”导入{Provider}
从“已连接路由器”导入{ConnectedRouter}
从“反应头盔”导入头盔
从“/index”导入{history}
从“组件”导入{NavBar,ProgressBar}
从'config'导入{SITE_NAME,COPYRIGHT}
从“路由”导入路由
常量AppLayout=()=>(
版权{新日期().getFullYear()}{版权}
)
导出默认值(道具)=>(
)
请检查
import { history } from './index'
请检查路径
import { history } from './index'
是的,我在App.js中将其更改为props.history,但问题仍然存在是的,我在App.js中将其更改为props.history,但问题仍然存在