This means it will render an ＜Outlet /＞ with a null value by default resulting in an “empty“ page.

今天在学习尚硅谷张天禹老师的react教程时，发现按照老师写的代码无法实现路由的跳转，代码如下：

<BrowserRouter>
          <div className="row">
            <div className="col-xs-2 col-xs-offset-2">
              <div className="list-group">
                {/* <a className="list-group-item active" href="./about.html">About</a>
                <a className="list-group-item" href="./home.html">Home</a> */}
                  <Link className="list-group-item active" to = '/about'>About</Link>
                  <Link className="list-group-item" to = '/home'>Home</Link>
              </div>
            </div>
            <div className="col-xs-6">
              <div className="panel">
                <div className="panel-body">
                    <Route path = '/about' component = {About} />
                    <Route path = '/home' component = {Home} />
                </div>
              </div>
            </div>
          </div>
</BrowserRouter>

 控制台报错：

 大致的意思是：<Route>只能用作<Routes>元素的子元素，不能直接渲染。请将您的<Route>包装成<Routes>。

所以引用Routes并使用：

 

 发现导航栏可以跳转但是没有展示的东西，控制台会报警告：

 看到这我想到会不会是react-router-dom版本的原因，于是我查看了官方的文档发现最新版本官方的写法已经改了：

 结合官方文档，正确的代码写法如下：