React配置自定义history时出现<Link> outside <Router>错误求助

错误原因 #

• 核心问题是react-router和react-router-dom依赖版本不匹配：你从react-router引入的<Router>组件，和从react-router-dom引入的<Link>、<Switch>等组件分属不同版本的包，路由上下文无法共享，因此内部的<Link>感知不到外层包裹的<Router>。
• 次要问题是MainNavigation.js中没有显式导入Link组件，即便导入如果来源包不对也会触发该报错。
• 若你使用了和当前react-router版本不兼容的自定义history包（比如v5版本react-router搭配history@5.x）也会引发上下文失效。

解决步骤 #

1. 先统一依赖版本，卸载现有冲突依赖后重新安装匹配版本：

npm uninstall react-router react-router-dom history
npm install react-router-dom@5.x history@4.10.1

yarn用户替换为对应的yarn命令即可。

2. 调整App.js的导入逻辑，所有路由相关组件统一从react-router-dom引入，避免跨包导入导致的上下文冲突：

//** Import router */
// 去掉原来从react-router导入Router的写法
import { Switch, Router } from 'react-router-dom';
import history from './hooks/useHistory';

const App = () => {
   return (
      <Router history={history}>
         <MainNavigation />
         <Switch>
            <Routes />
         </Switch>
      </Router>
   );
};

export default App;

3. 给MainNavigation.js补全Link组件的导入：

import { Link } from 'react-router-dom';

const MainNavigation = () => {
   return (
      <>
         <div className='navigation'>
            <ul>
               <Link to='/'>
                  <li>Home</li>
               </Link>
               <Link to='/contact'>
                  <li>Contact</li>
               </Link>
               <Link to='/about'>
                  <li>A propos</li>
               </Link>
               <Link to='/user-profile'>
                  <li>Votre compte</li>
               </Link>
            </ul>
         </div>
      </>
   );
};

export default MainNavigation;

调整完成后重启项目即可解决报错。

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