使用react-router-dom路由时出现You should not use Link outside a Router错误求助

这个错误的根源很清晰：你在App组件里使用了Link组件，但整个应用并没有被react-router-dom提供的Router上下文包裹——Link必须在Router组件（比如BrowserRouter或HashRouter）的内部才能正常工作。

看你的index.js，当前只有Redux的Provider包裹着App，缺少了路由的Router层。只需要做以下修改就能解决：

修改后的index.js代码 #

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createLogger } from 'redux-logger'
// 引入BrowserRouter，并重命名为Router方便使用
import { BrowserRouter as Router } from 'react-router-dom'
import App from './containers/App';

render(
  <Provider>
    {/* 用Router组件包裹App，让路由上下文覆盖整个应用 */}
    <Router>
      <App/>
    </Router>
  </Provider>, 
  document.getElementById('root')
)

关键说明 #

• 从react-router-dom导入BrowserRouter（单页应用优先用这个，静态部署场景可以考虑HashRouter）
• 确保所有使用Link、Route、Navigate等路由相关组件的部分，都处于Router组件的内部。把App放在Router里，就能让整个应用都能访问到路由上下文了。

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