使用React-Router时出现的错误：

问题描述

在配置路由时出现的问题，关于 Router5 和 Router6的使用区别

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 (组件) 是一一对应的关系。
在默认的路由匹配规则中，如果不使用Switch，注册的所有路由都会和路径进行匹配，并且将匹配到的组件都显示出来。如下代码：如果输入路径为 /home 将会显示 Home 和 Hotel 两个组件。
Switch可以提高路由的匹配效率，一旦匹配上将不再继续向下匹配。

      <Routes> <Route path="/about" element={<About />}/><Route path="/home" element={<Home />}/><Route path="/home" element={<Hotel />}/></Routes>

Router6 中的Routes

Router6 中使用了 Routes 代替了 Switch，但是细微的差别是，Router5中不使用Switch是不会报错的。但是Router6中不使用Routes会报上述错误。这样修改的原因有待学习？？

解决方案：

综上，解决方法当然是加上 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

使用React-Router时出现的错误相关推荐

初探 React Router 4.0
React Router 4.0 (以下简称 RR4) 已经正式发布,它遵循React的设计理念,即万物皆组件.所以 RR4 只是一堆提供了导航功能的组件(还有若干对象和方法),具有声明式(引入即用 ...
React Router 使用教程
真正学会 React 是一个漫长的过程. 你会发现,它不是一个库,也不是一个框架,而是一个庞大的体系.想要发挥它的威力,整个技术栈都要配合它改造.你要学习一整套解决方案,从后端到前端,都是全新的做法. ...
关于React Router v4的虚张声势指南
In this article, we'll cover the important things you can quickly learn to be informed and confident ...
阮一峰 React Router 教程
阮一峰 React Router 教程本文介绍 React 体系的一个重要部分:路由库 React-Router.它是官方维护的,事实上也是唯一可选的路由库.它通过管理 URL,实现组件的切换和状态 ...
hitchhiker部署_Hitchhiker的React Router v4指南：20分钟内完成Grok React Router
hitchhiker部署 Hi fellow React Hitchhiker! Want a ride into React Router? Jump in. Let's go! 大家好,React ...
react router
目录前言核心 1.内置的组件 2.内置的路由器组件 3.History 对象 4.Location 对象 5.react router 的安装包一.React-Router v1 1.一些概念 ...
React router 的 Route 中 component 和 render 属性理解
React router 的 Route 中 component 和 render 属性理解 Route 标签的三个互斥属性 render.component.children Route 就是用来匹 ...
router路由react_使用React Router在React中受保护的路由
router路由react In this video, you will see how to create a protected route using React Router. This r ...
hitchhiker部署_Hitchhiker的React Router v4指南：无限远的递归路径！
hitchhiker部署 Welcome to the third part of the Hitchhiker's Guide to React Router v4. In this article ...

使用React-Router时出现的错误

使用React-Router时出现的错误：

问题描述

原因分析：

Switch的作用：

Router6 中的Routes

解决方案：

使用React-Router时出现的错误相关推荐

最新文章

热门文章