解决router相关报错

报错:Link不应该在router的外部

在Header组件中使用”react-router-dom”的Link组件时，报错：Error: Invariant failed: You should not use <Link> outside a <Router>也就是说Link不应该在router的外部：

原因

到App.js中可以看到，Header和BrowserRouter组件是并列关系，也就是说，处于Header组件中的Link组件和BrowserRouter组件是并列关系，Link也就在router的外部了：

解决方法

将Header组件放入BrowserRouter组件内部:

复习

关于BrowserRouter可参考这篇笔记