React-Router 2.8.1+Redux配置编译报错求助

Hey there, let's break down what's going on here and fix this step by step!

The Root Cause #

The error you're seeing is because React 16+ removed the built-in PropTypes from the core React package, but your react-router 2.8.1 is an older version that relies directly on React.PropTypes—which no longer exists in your React 16 environment.

On top of that, there are a couple of other conflicts in your setup:

• You have both react-router 2.8.1 and react-router-dom 4.2.2 installed, which will cause dependency clashes since they're different major versions of the routing library.
• In your store/index.js, you're calling routerMiddleware(history) but history isn't defined—you exported browserHistory instead.

Step-by-Step Fixes #

1. Install the Standalone prop-types Package #

React 16 moved PropTypes to its own package, so we need to install it to support the old react-router version:

npm install prop-types@^15.6.0 --save

2. Update Webpack Config to Point Old PropTypes to the New Package #

Since you've ejected create-react-app, you'll need to modify both config/webpack.config.dev.js and config/webpack.config.prod.js:

Option A: Add Resolve Aliases

Find the resolve.alias section and add these entries to map old React PropTypes imports to the new package:

resolve: {
  alias: {
    // Fix react-router 2.x's PropTypes dependency
    'react/lib/ReactPropTypes': 'prop-types',
    'react/lib/ReactElement': 'react',
    'react/lib/ReactComponentWithPureRenderMixin': 'react-addons-pure-render-mixin'
  }
}

Option B: Use Webpack's ProvidePlugin (Alternative)

Add this plugin to the plugins array to globally inject React.PropTypes:

new webpack.ProvidePlugin({
  'React.PropTypes': 'prop-types'
})

3. Remove Conflicting Routing Dependency #

You don't need both react-router (v2) and react-router-dom (v4+). Uninstall the v4 package to avoid conflicts:

npm uninstall react-router-dom --save

4. Fix the Router Middleware in Your Store #

In store/index.js, you're passing an undefined history variable to routerMiddleware. Replace it with your exported browserHistory:

const middleware = [
  thunk,
  routerMiddleware(browserHistory) // Swap undefined 'history' with your browserHistory
]

Verify the Fix #

After making these changes, restart your development server:

npm start

Your build errors should be resolved, and your react-router + Redux setup should work as expected with the old routing structure you need.

内容的提问来源于stack exchange，提问作者EdG