关于react-router-dom 6.0.1的基础写法解决Error: A ＜Route＞ is only ever to be used as the child of ＜Routes＞

在新建react项目中
使用react-router-dom 6.0.1版本难免会遇到以下报错

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

首先要了解 6.0.1的写法更改了

要切换的组件

function Index() {return <h2>首页</h2>;
}function List() {return <h2>列表</h2>;
}

以前版本
Route 需要在 Router 里，组件为 component

function Example() {return (<Router><ul><li> <Link to="/">首页</Link> </li><li><Link to="/list/">列表</Link> </li></ul><Route path="/" exact component={Index} /><Route path="/list/" component={List} /></Router>)
}

现在版本
Route 需要在 Routes 里，组件为 element,注意括号内为标签

function Example() {return (<div><ul><li><Link to="/">首页</Link></li><li><Link to="/list/">list</Link></li></ul><Routes><Route path="/" exact element={<Index/>}/><Route path="/list/" element={<List/>}/></Routes></div>)
}

官方案例地址: https://stackblitz.com/github/remix-run/react-router/tree/main/examples/basic?file=src%2FApp.tsx.
官方git仓库: https://github.com/remix-run/react-router.

关于react-router-dom 6.0.1的基础写法解决Error: A ＜Route＞ is only ever to be used as the child of ＜Routes＞相关推荐

关于react-router-dom 6.0.1的基础写法解决Error A ＜Route＞ is only ever to be used as the child of ＜Routes＞
在新建react项目中使用react-router-dom 6.0.1版本难免会遇到以下报错 Error: A <Route> is only ever to be used as th ...
关于react-router-dom 6.0.1的更新基本写法解决Error: A ＜Route＞ is only ever to be used as the child of ＜Routes＞
文章目录前言一.先准备好要切换的组件二.在 V5 版本则是这样使用 v5版本:`Router`直接包裹着`Route组件` 三.在V6版本则是这样使用 v6版本:`Route`需要先被`Rout ...
使用React Router以编程方式导航
通过react-router我可以使用Link元素来创建由react路由器本地处理的链接. 我在内部看到它调用this.context.transitionTo(...) . 我想从下拉列表中进行导航 ...
React Router路由详解
React Router路由详解一.基础 1.安装使用 2.React Router 中通用的组件路由组件 BrowserRouter 和 HashRouter 路径匹配组件: Route 和 S ...
react router
目录前言核心 1.内置的组件 2.内置的路由器组件 3.History 对象 4.Location 对象 5.react router 的安装包一.React-Router v1 1.一些概念 ...
React Router入门指南
by Nader Dabit 纳德·达比特(Nader Dabit) React Router入门指南 (Beginner's Guide to React Router) Or what I wis ...
初探 React Router 4.0
React Router 4.0 (以下简称 RR4) 已经正式发布,它遵循React的设计理念,即万物皆组件.所以 RR4 只是一堆提供了导航功能的组件(还有若干对象和方法),具有声明式(引入即用 ...
React Router 使用教程
真正学会 React 是一个漫长的过程. 你会发现,它不是一个库,也不是一个框架,而是一个庞大的体系.想要发挥它的威力,整个技术栈都要配合它改造.你要学习一整套解决方案,从后端到前端,都是全新的做法. ...
React Router 学习
本次使用react-router 版本为 5.0.1 本教程前提是你的应用程序是一个web应用程序,使用'react-router-dom'包来实现页面的路由在React router中有三种类型的 ...

关于react-router-dom 6.0.1的基础写法解决Error: A ＜Route＞ is only ever to be used as the child of ＜Routes＞

关于react-router-dom 6.0.1的基础写法解决Error: A ＜Route＞ is only ever to be used as the child of ＜Routes＞相关推荐

最新文章

热门文章

关于react-router-dom 6.0.1的基础写法 解决Error: A ＜Route＞ is only ever to be used as the child of ＜Routes＞

关于react-router-dom 6.0.1的基础写法 解决Error: A ＜Route＞ is only ever to be used as the child of ＜Routes＞相关推荐

最新文章

热门文章

关于react-router-dom 6.0.1的基础写法解决Error: A ＜Route＞ is only ever to be used as the child of ＜Routes＞

关于react-router-dom 6.0.1的基础写法解决Error: A ＜Route＞ is only ever to be used as the child of ＜Routes＞相关推荐