关于React张天禹老师网课中路由器章节BrowserRouter环节样式不匹配的问题

经检查是bootstrap样式升级过，

新版本删除了page-header样式。

需要从老版本bootstrap中找到page-header样式后通过内联样式表添加到index.html中。

.page-header {
  padding-bottom: 9px;
  margin: 40px 0 20px;
  border-bottom: 1px solid #eeeeee;
  border-bottom-width: 100%;
}
.link-offset:hover {
  /* 添加你想要的hover样式 */
  /* 例如修改颜色 */
  color: red;
}
.list-group-item:hover {
  /* 添加你想要的hover样式 */
  /* 例如修改背景色 */
  background-color: green;
}

这里提供我自己用的

同时也给出App.js组件中被<BrowserRouter>标签包裹的内容

<div>
          <div className="row">
            <div className="col-xl-8 offset-xl-2">
              <div className="page-header">
                <h2>React Router Demo</h2>
              </div>
            </div>
          </div>
          <div className="row">
            <div className="col-xl-2 offset-xl-2">
              <div className="list-group">
                <Link className="list-group-item link-offset" to="/about">About</Link>
                <Link className="list-group-item link-offset" to="/home">Home</Link>
              </div>
            </div>
            <div className="col-xl-6">
              <div className="panel">
                <div className="panel-body">
                  <Home/>
                  <About/>
                </div>
              </div>
            </div>
          </div>
        </div>

仅供参考