使用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 (組件) 是一一對應(yīng)的關(guān)系。
- 在默認(rèn)的路由匹配規(guī)則中，如果不使用Switch，注冊的所有路由都會和路徑進(jìn)行匹配，并且將匹配到的組件都顯示出來。如下代碼：如果輸入路徑為 /home 將會顯示 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是不會報(bào)錯(cuò)的。
但是Router6中不使用Routes會報(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、redux、react-redux之間的關(guān)系
這篇文章主要介紹了詳解react、redux、react-redux之間的關(guān)系，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
解決React報(bào)錯(cuò)useNavigate()?may?be?used?only?in?context?of
這篇文章主要為大家介紹了解決React報(bào)錯(cuò)useNavigate()?may?be?used?only?in?context?of?Router，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
本文主要介紹了React+Ts實(shí)現(xiàn)二次封裝組件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要介紹了react ant design樣式覆蓋問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
React Hooks: useEffect()調(diào)用了兩次問題分析
這篇文章主要為大家介紹了React Hooks: useEffect()調(diào)用了兩次問題分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
React Native基礎(chǔ)入門之調(diào)試React Native應(yīng)用的一小步
這篇文章主要給大家介紹了關(guān)于React Native基礎(chǔ)入門之調(diào)試React Native應(yīng)用的相關(guān)資料，文中通過圖文介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
Native?Memory?Tracking追蹤區(qū)域示例分析
這篇文章主要為大家介紹了Native?Memory?Tracking追蹤區(qū)域示例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
Rect Intersection判斷兩個(gè)矩形是否相交
這篇文章主要為大家介紹了Rect Intersection判斷兩個(gè)矩形是否相交的算法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
React父子組件傳值(組件通信)的實(shí)現(xiàn)方法
本文主要介紹了React父子組件傳值(組件通信)的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
條件渲染在React開發(fā)中非常重要的功能,它允許開發(fā)人員根據(jù)條件控制渲染的內(nèi)容,在創(chuàng)建動態(tài)和交互式用戶界面方面發(fā)揮著至關(guān)重要的作用,本文總結(jié)了常用的的條件渲染方法,需要的朋友可以參考下2024-01-01