今天在學(xué)習(xí)尚硅谷張?zhí)煊砝蠋煹膔eact教程時(shí)，發(fā)現(xiàn)按照老師寫的代碼無(wú)法實(shí)現(xiàn)路由的跳轉(zhuǎn)，代碼如下：

<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>

?控制臺(tái)報(bào)錯(cuò)：

?大致的意思是：<Route>只能用作<Routes>元素的子元素，不能直接渲染。請(qǐng)將您的<Route>包裝成<Routes>。

所以引用Routes并使用：

?

?發(fā)現(xiàn)導(dǎo)航欄可以跳轉(zhuǎn)但是沒有展示的東西，控制臺(tái)會(huì)報(bào)警告：

?看到這我想到會(huì)不會(huì)是react-router-dom版本的原因，于是我查看了官方的文檔發(fā)現(xiàn)最新版本官方的寫法已經(jīng)改了：

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

?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。