如何修复connected-react-router导入错误及matchPath导出问题？

I’ve run into this exact issue before, and it almost always boils down to version compatibility conflicts between connected-react-router and react-router/react-router-dom. Here’s how to fix it step by step:

Why This Happens #

Starting with react-router v6, the matchPath function was moved from the react-router core package to react-router-dom. Older versions of connected-react-router still try to import matchPath from react-router, which no longer exports it in v6+—hence the error you’re seeing.

Solutions #

1. Upgrade connected-react-router to Support React Router v6 #

If you’re using react-router/react-router-dom v6 or later, you need a version of connected-react-router that’s compatible with it. connected-react-router added support for React Router v6 starting from v6.9.0.

Run one of these commands to upgrade:

# npm
npm install connected-react-router@latest

# yarn
yarn add connected-react-router@latest

After upgrading, the internal imports in connected-react-router will point to react-router-dom for matchPath, resolving the error.

2. Downgrade React Router to v5 (If You Can’t Upgrade connected-react-router) #

If your project has dependencies that prevent upgrading connected-react-router, you can instead downgrade react-router and react-router-dom to v5, which still exports matchPath from the core react-router package.

Install the latest v5 versions:

# npm
npm install react-router@5.3.0 react-router-dom@5.3.0

# yarn
yarn add react-router@5.3.0 react-router-dom@5.3.0

3. Double-Check Your Own Imports #

If you’re importing matchPath in your own code, make sure it’s coming from the right place:

• For React Router v6+: import { matchPath } from 'react-router-dom'
• For React Router v5: import { matchPath } from 'react-router'

Quick Note for React Router v6 Users #

After upgrading connected-react-router, ensure your Redux and routing setup aligns with React Router v6’s API changes. For example, use <Routes> instead of <Switch>, and update any route path patterns to match v6’s syntax. The ConnectedRouter component from connected-react-router should still work as expected with these changes.

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