今天在學習尚硅谷張天禹老師的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版本的原因，于是我查看了官方的文檔發現最新版本官方的寫法已經改了：

?結合官方文檔，正確的代碼寫法如下：

?

總結

以上是生活随笔為你收集整理的This means it will render an ＜Outlet /＞ with a null value by default resulting in an “empty“ page.的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。