React 构建单页应用fix bug You should not use Link outside a Router

记录使用react-router-dom的坑

一直用vue的路由思想 实现单页路由的跳转，但是尚未成功 还提示我You should not use <Link> outside a <Router>
误以为 <HashRouter>相当于vue的<router-view>
在网上也没有找到具体的资料 但是我猜想是因为我把footer组件里引用的link 放到了 HashRouter标签的外面
一开始我的页面布局是这样子的

会一直报错：You should not use <Link> outside a <Router>

第二张方案

之后我在想是不是因为没有容器包裹着路由跳转的HashRouter 所以我就给页面做一个整体优化，如下图所示

事实证明我是对的!