前言

提示：在新建react项目中
使用react-router-dom 6.0.1版本难免会遇到以下报错
例如：Error: A is only ever to be used as the child of element, never rendered directly. Please wrap your in a .

提示：以下是本篇文章正文内容，下面案例可供参考

一、先准备好要切换的组件

class About extends Component {render(){return <h1>我是about内容<h1>}
}class Home extends Component {render(){return <h1>我是home内容<h1>}
}

二、在 V5 版本则是这样使用

v5版本：`Router`直接包裹着`Route组件`

function Example() {return (<Router><ul><li> <Link to="/">home</Link> </li><li> <Link to="/about">about</Link> </li></ul><Route path="/"  component={Home} /><Route path="/about" component={About} /></Router>)
}

三、在V6版本则是这样使用

v6版本：`Route`需要先被`Routes`组件包裹，再被路由器包裹，

其次把原来的`component`改为`element`，

`最后千万不要忘了在element中写成组件形式</>，如：{<Home/>}`

function Example() {return (<Router><ul><li> <Link to="/">home</Link> </li><li> <Link to="/about">about</Link> </li></ul><Routes><Route path="/"  element={<Home/>} /><Route path="/about" element={<About/>} /><Routes></Router>)
}

总结

提示：这里对文章进行总结：
新版本react-router-dom中主要注意一下三点：

在路由器包裹路由之前需要先在路由外侧添加Routes组件
路由中的component需要改为element
element后面需要写成组件标签形式，如element={<Home/>}

关于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＞
在新建react项目中使用react-router-dom 6.0.1版本难免会遇到以下报错 Error: A <Route> is only ever to be used as th ...
使用React Router以编程方式导航
通过react-router我可以使用Link元素来创建由react路由器本地处理的链接. 我在内部看到它调用this.context.transitionTo(...) . 我想从下拉列表中进行导航 ...
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 ...
router路由react_使用React Router在React中受保护的路由
router路由react In this video, you will see how to create a protected route using React Router. This r ...
android8.0更新手机,安卓微信8.0.6正式更新：可发1G大文件、表情互动等多项更新！...
"送上最新最快的安卓微信8.0.6正式版解析~" 这两天微信的更新肯定会让大家喜欢的,昨天给大家写的关于PC微信3.3.0内测版本的更新,部分小伙伴子啊下方留言遇到了下载了最新内测 ...
android 微信文件位置改变大小,安卓微信8.0.6内测更新：发文件大小上调1G等6个变化！...
| 本文由我原创,转载请标注来源. "送上最新最快的内测更新资讯,让你第一时间知道~" 大家心心念念的安卓微信它更新了,而且版本不是你们想象中的顺延下去的8.0.4,而是8.0.6 ...
初探 React Router 4.0
React Router 4.0 (以下简称 RR4) 已经正式发布,它遵循React的设计理念,即万物皆组件.所以 RR4 只是一堆提供了导航功能的组件(还有若干对象和方法),具有声明式(引入即用 ...

关于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`需要先被`Routes`组件包裹，再被路由器包裹，

其次把原来的`component`改为`element`，

`最后千万不要忘了在element中写成组件形式</>，如：{<Home/>}`

总结

关于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＞

文章目录

前言

一、先准备好要切换的组件

二、在 V5 版本则是这样使用

v5版本：Router直接包裹着Route组件

三、在V6版本则是这样使用

v6版本：Route需要先被Routes组件包裹，再被路由器包裹，

其次把原来的component改为element，

最后千万不要忘了在element中写成组件形式</>，如：{<Home/>}

总结

关于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＞

v5版本：`Router`直接包裹着`Route组件`

v6版本：`Route`需要先被`Routes`组件包裹，再被路由器包裹，

其次把原来的`component`改为`element`，

`最后千万不要忘了在element中写成组件形式</>，如：{<Home/>}`

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