Question

我正在尝试为我的create-react-app应用程序设置react router和redux。出于某种原因，我在我的应用程序中使用“react-router”：“2.8.1”，因为我想使用旧的路由器结构。我已经设置了所有内容，但我在编译时遇到错误

我得到的错误是

这是我的商店/ index.js

import _ from 'lodash'

import { createStore, applyMiddleware, compose } from 'redux'
import { routerMiddleware } from 'react-router-redux'
import thunk from 'redux-thunk'
import createHistory from 'history/createBrowserHistory'
import rootReducer from './rootReducer'
import useRouterHistory from 'react-router/lib/useRouterHistory'
// export const history = createHistory()

export const browserHistory = useRouterHistory(createHistory)({
    queryKey: false,
    basename: '/'
});

export function storageSupported(){
    var testKey = 'ls-test';
    try {
        window.localStorage.setItem('ls-test', '1');
        window.localStorage.removeItem('ls-test');
        return true
    } catch (err){
        return false
    }
}

export function saveState(state){
    try {
        var serialized = JSON.stringify(state)
        localStorage.setItem('state', serialized)
    } catch (err){
        return undefined
    }
}

export function loadState(state){
    console.log('Loading persisted state...')
    try{
        var serialized = localStorage.getItem('state')
        if (serialized === null){
            return undefined
        }
        return JSON.parse(serialized)
    } catch (err){
        return undefined
    }
}

var savedState = loadState()
var initialState = _.merge({}, savedState)
const enhancers = []
const middleware = [
    thunk,
    routerMiddleware(history)
]

if (process.env.NODE_ENV === 'development') {
    const devToolsExtension = window.devToolsExtension

    if (typeof devToolsExtension === 'function') {
        enhancers.push(devToolsExtension())
    }
}

const composedEnhancers = compose(
    applyMiddleware(...middleware),
    ...enhancers
)

const store = createStore(
    rootReducer,
    initialState,
    composedEnhancers
)

export default store

这是我的index.js文件

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './Container/App/App';
import registerServiceWorker from './registerServiceWorker';
import Root from './Container/Root'
import {Provider} from 'react-redux'
import store, {browserHistory} from './store'

import _ from 'lodash'

import Router from 'react-router/lib/Router'
import RouterContext from 'react-router/lib/RouterContext'



import { syncHistoryWithStore } from 'react-router-redux'
import {storageSupported } from './store'

import getRoutes from './routes'

var debug = require('debug')('tessact:client')

var history = syncHistoryWithStore(browserHistory, store, {
    selectLocationState: (state) => state.router
});

const SKIP_PERSIST_KEYS = ['router']    // Do not get saved to localStorage
// if (storageSupported()){
//     window.localStorage.debug = 'tessact:*';
//     store.subscribe(_.throttle(()=> {
//         debug('Persisting data to store.')
//         var data = store.getState();
//         saveState( _.omit(data, ...SKIP_PERSIST_KEYS) )
//     }, 2000))
// }


var routes  = getRoutes(store);

ReactDOM.render(

        <App store={store}>
                <Router history={history}>
                    {routes}
                </Router>
        </App>
    ,
    document.getElementById('root'));
registerServiceWorker();

这是我的package.json

"dependencies": {
    "autoprefixer": "7.1.6",
    "babel-core": "6.26.0",
    "babel-eslint": "7.2.3",
    "babel-jest": "20.0.3",
    "babel-loader": "7.1.2",
    "babel-preset-react-app": "^3.1.1",
    "babel-runtime": "6.26.0",
    "case-sensitive-paths-webpack-plugin": "2.1.1",
    "chalk": "1.1.3",
    "css-loader": "0.28.7",
    "dotenv": "4.0.0",
    "dotenv-expand": "4.0.1",
    "eslint": "4.10.0",
    "eslint-config-react-app": "^2.1.0",
    "eslint-loader": "1.9.0",
    "eslint-plugin-flowtype": "2.39.1",
    "eslint-plugin-import": "2.8.0",
    "eslint-plugin-jsx-a11y": "5.1.1",
    "eslint-plugin-react": "7.4.0",
    "extract-text-webpack-plugin": "3.0.2",
    "file-loader": "1.1.5",
    "fs-extra": "3.0.1",
    "history": "^4.7.2",
    "html-webpack-plugin": "2.29.0",
    "isomorphic-fetch": "^2.2.1",
    "isomorphic-style-loader": "^1.0.0",
    "jest": "20.0.4",
    "object-assign": "4.1.1",
    "postcss-flexbugs-fixes": "3.2.0",
    "postcss-loader": "2.0.8",
    "promise": "8.0.1",
    "raf": "3.4.0",
    "react": "^16.2.0",
    "react-dev-utils": "^5.0.0",
    "react-dom": "^16.2.0",
    "react-router": "2.8.1",
    "react-redux": "^5.0.6",
    "react-router-dom": "^4.2.2",
    "react-router-redux": "4.0.8",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0",
    "style-loader": "0.19.0",
    "stylus": "^0.54.5",
    "stylus-loader": "2.5.0",
    "sw-precache-webpack-plugin": "0.11.4",
    "url-loader": "0.6.2",
    "webpack": "3.8.1",
    "webpack-dev-server": "2.9.4",
    "webpack-manifest-plugin": "1.3.2",
    "whatwg-fetch": "2.0.3"
  },

错误号1这是解决错误2和3后得到的结果

./node_modules/react-router/lib/InternalPropTypes.js
C:/Users/apurv/eject-app/node_modules/react-router/lib/InternalPropTypes.js:9
   6 | 
   7 | var _react = require('react');
   8 | 
>  9 | var func = _react.PropTypes.func;
  10 | var object = _react.PropTypes.object;
  11 | var arrayOf = _react.PropTypes.arrayOf;
  12 | var oneOfType = _react.PropTypes.oneOfType;
View compiled
__webpack_require__
C:/Users/apurv/eject-app/webpack/bootstrap d5e01375e66dede63720:678
  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;
View compiled
fn
C:/Users/apurv/eject-app/webpack/bootstrap d5e01375e66dede63720:88
  85 |      console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  86 |      hotCurrentParents = [];
  87 |  }
> 88 |  return __webpack_require__(request);
  89 | };
  90 | var ObjectFactory = function ObjectFactory(name) {
  91 |  return {
View compiled
./node_modules/react-router/lib/Router.js
C:/Users/apurv/eject-app/node_modules/react-router/lib/Router.js:27
  24 | 
  25 | var _createTransitionManager2 = _interopRequireDefault(_createTransitionManager);
  26 | 
> 27 | var _InternalPropTypes = require('./InternalPropTypes');
  28 | 
  29 | var _RouterContext = require('./RouterContext');
  30 | 
View compiled
__webpack_require__
C:/Users/apurv/eject-app/webpack/bootstrap d5e01375e66dede63720:678
  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;
View compiled
fn
C:/Users/apurv/eject-app/webpack/bootstrap d5e01375e66dede63720:88
  85 |      console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  86 |      hotCurrentParents = [];
  87 |  }
> 88 |  return __webpack_require__(request);
  89 | };
  90 | var ObjectFactory = function ObjectFactory(name) {
  91 |  return {
View compiled
./src/index.js
http://localhost:3000/static/js/bundle.js:68828:82
__webpack_require__
C:/Users/apurv/eject-app/webpack/bootstrap d5e01375e66dede63720:678
  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;
View compiled
fn
C:/Users/apurv/eject-app/webpack/bootstrap d5e01375e66dede63720:88
  85 |      console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  86 |      hotCurrentParents = [];
  87 |  }
> 88 |  return __webpack_require__(request);
  89 | };
  90 | var ObjectFactory = function ObjectFactory(name) {
  91 |  return {
View compiled
0
http://localhost:3000/static/js/bundle.js:69277:18
__webpack_require__
C:/Users/apurv/eject-app/webpack/bootstrap d5e01375e66dede63720:678
  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;
View compiled
(anonymous function)
C:/Users/apurv/eject-app/webpack/bootstrap d5e01375e66dede63720:724
  721 | __webpack_require__.h = function() { return hotCurrentHash; };
  722 | 
  723 | // Load entry module and return exports
> 724 | return hotCreateRequire(0)(__webpack_require__.s = 0);
  725 | 
  726 | 
  727 | 
View compiled

React-Router-Redux无法正常工作

0 个答案: