使用React-Router時(shí)出現(xiàn)的錯(cuò)誤及解決
問題描述
在配置路由時(shí)出現(xiàn)的問題，關(guān)于 Router5 和 Router6的使用區(qū)別
bundle.js:38620 Uncaught Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.
at invariant (bundle.js:38620:20)
at Route (bundle.js:39415:11)
at renderWithHooks (bundle.js:24114:22)
at mountIndeterminateComponent (bundle.js:28690:17)
at beginWork (bundle.js:30148:20)
at HTMLUnknownElement.callCallback (bundle.js:12074:18)
at Object.invokeGuardedCallbackDev (bundle.js:12123:20)
at invokeGuardedCallback (bundle.js:12185:35)
at beginWork$1 (bundle.js:34989:11)
at performUnitOfWork (bundle.js:34163:16)
原因分析
Switch的作用
- 通常情況下，path (路徑) 和 coponent (組件) 是一一對(duì)應(yīng)的關(guān)系。
- 在默認(rèn)的路由匹配規(guī)則中，如果不使用Switch，注冊(cè)的所有路由都會(huì)和路徑進(jìn)行匹配，并且將匹配到的組件都顯示出來。如下代碼：如果輸入路徑為 /home 將會(huì)顯示 Home 和 Hotel 兩個(gè)組件。
- Switch可以提高路由的匹配效率，一旦匹配上將不再繼續(xù)向下匹配。
<Routes>
<Route path="/about" element={<About />}/>
<Route path="/home" element={<Home />}/>
<Route path="/home" element={<Hotel />}/>
</Routes>
Router6中的Routes
Router6 中使用了 Routes 代替了 Switch，但是細(xì)微的差別是，Router5中不使用Switch是不會(huì)報(bào)錯(cuò)的。
但是Router6中不使用Routes會(huì)報(bào)上述錯(cuò)誤。
這樣修改的原因有待學(xué)習(xí)？？
解決方案
綜上，解決方法當(dāng)然是加上 Routes 呀
import React from "react";
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom'
import Login from "./Login";
function Main(){
return (
<Router>
<Routes>
<Route path='/login' exact element={<Login/>} />
</Routes>
</Router>
)
}
export default Main
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
React經(jīng)典面試題之倒計(jì)時(shí)組件詳解
這些天也都在面試,面試的內(nèi)容也大多千篇一律,無外乎vue、react這些框架的一些原理,和使用方法,但是也遇到些有趣的題目,這篇文章主要給大家介紹了關(guān)于React經(jīng)典面試題之倒計(jì)時(shí)組件的相關(guān)資料,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了react中useState改變值不渲染的解決方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要為大家詳細(xì)介紹了react實(shí)現(xiàn)拖拽模態(tài)框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
React前端解鏈表數(shù)據(jù)結(jié)構(gòu)示例詳解
這篇文章主要為大家介紹了React前端解鏈表數(shù)據(jù)結(jié)構(gòu)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
React錯(cuò)誤邊界Error Boundaries
錯(cuò)誤邊界是一種React組件,這種組件可以捕獲發(fā)生在其子組件樹任何位置的JavaScript錯(cuò)誤,并打印這些錯(cuò)誤,同時(shí)展示降級(jí)UI,而并不會(huì)渲染那些發(fā)生崩潰的子組件樹2023-01-01
詳解vant2 自動(dòng)檢查表單驗(yàn)證 -validate
這篇文章主要介紹了vant2 自動(dòng)檢查表單驗(yàn)證 -validate,本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-10-10
使用React+ts實(shí)現(xiàn)無縫滾動(dòng)的走馬燈詳細(xì)過程
這篇文章主要給大家介紹了關(guān)于使用React+ts實(shí)現(xiàn)無縫滾動(dòng)的走馬燈詳細(xì)過程,文中給出了詳細(xì)的代碼示例以及圖文教程,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了React中Props的淺對(duì)比的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用React，感興趣的朋友可以了解下2021-05-05
react 原生實(shí)現(xiàn)頭像滾動(dòng)播放的示例
這篇文章主要介紹了react 原生實(shí)現(xiàn)頭像滾動(dòng)播放的示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要介紹了React+Webpack快速上手指南(小結(jié))，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08