Warning: You should not use ＜Route component＞ and ＜Route children＞ in the same route

最新推荐文章于 2022-02-15 16:28:09 发布

前端攻城狮中的小菜鸡

最新推荐文章于 2022-02-15 16:28:09 发布

阅读量634

点赞数 1

文章标签： react.js

本文链接：https://blog.csdn.net/m0_55645703/article/details/120176267

版权

本文探讨了在React Router v4及以上版本中遇到的两个常见警告：Route组件不能嵌套和空格换行问题。解释了Route组件直接嵌套会导致的问题，并提供了将连续的Route组件写在同一行或者使用自闭和标签的解决方案，以保持路由配置的正确性。

摘要由CSDN通过智能技术生成

出现这种警告/错误的原因：

Route组件下面不能嵌套Route组件，react-roter4版本以上就不能这样写了
Route组件之间不能有空格换行，所以要么<Route></Route>，要么写成一个自闭和标签<Route/>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端攻城狮中的小菜鸡

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue-router 嵌套路由注意点

10-14

327

注意下面几点： 1、在组件中，我们可以通过 $route.params.id 来获取到user/小明/post 中的小明，这样，我们就可以进行个性化的设置了。 2、以 / 开头的嵌套路径会被当做根路径，这可以让你充分的使用嵌套组件而无需设置嵌套的路径。也就是说：我们在children下，写path: "profile", 就相当于拼接成了 /user/:id/profile ，当然，我们也可以直接写为 path: "/user/:id/profile" ，最终的结果是一样的，但是我个人认为后者

React router的Route中component和render属性理解

hardly555的博客

09-28

8260

最近在学习react-router现在写一下我对其中Route标签的三个互斥属性render、component、children的理解。 The Route component is perhaps the most important component in React Router to understand and learn to use well. Its most basic responsibility is to render some UI when its path matches

参与评论您还未登录，请先登录后发表或查看评论

React路由神坑Warning: You should not use ＜Route component＞ and ＜Route children＞ in the same route；

xawjz的博客

10-23

691

解决方法：删除Route标签中的空格或者换行。今天学习了react-router。在router.js中写了如下内容发现，页面无法显示，但是编译成功了。 import { BrowserRouter as Router,Route} from 'react-router-dom'; import React from 'react'; import App from './pages/app'; import Login from './pages/login'...

Warning: You should not use ＜Route component＞ and ＜Route children＞ in the same route；＜Route compone

weixin_47116639的博客

02-25

1920

报错Warning: You should not use and in the same route; <Route compone react 路由之坑，非常坑当以下情形就会报以上错误， <Router> <div className='app'> <Switch> {/* 如果路径是/ 就跳转到/home */} <Redirect exact from='/' to ='/home'></Redire

You should not use <Route component> and <Route children> in the same route; <Route children> will b...

weixin_30341735的博客

11-07

223

　　import Home from './programme/containers/home.jsx' <Switch> <Route exact path="/login" component={Login}/> <Route path="/home" component={Home}> 　　<Route...

You should not use Route component and Route render in the same route

qq_44096635的博客

06-05

1098

//You should not use <Route component> and <Route render> in the same route; //<Route render> will be ignored //这句话是不用在路由中再嵌套路由 //错误写法 <Route {...props} render={(item) => { if (item.isLogin) {

react-router V4 版本不能嵌套路由的问题

waterring的博客

07-21

578

解决React-router不能够嵌套路由的问题 react-router v2和v4的版本跳跃还是挺大的，最近需要嵌套路由，发现某个地方一直不能显示嵌套路由的内容。经过排查以后，发现是父组件加了exact属性，要求严格匹配，去除掉就好了

react项目中遇到的bug

Azhangyuaner的博客

10-23

917

1、react-router使用时，在浏览器出错：Attempted import error: 'Link' is not exported from 'react-router 源代码如下： import React, { Component } from 'react'; import {Menu} from 'semantic-ui-react'; import 'semant...

react全家桶4-react router4

一只狐猴的博客

01-21

1110

react router4 官网中文文档地址：https://react-router.docschina.org 下载包: npm install react-router-dom --save 文档原文：在web应用程序中使用的所有组件都应该从react-router-dom中取 react-router应用程序的核心应该是一个router组件，对于web项目，react-route...

INTRODUCTION TO THE LAW OF VIRTUAL AND AUGMENTED REALITY

weixin_42786150的博客

02-15

3706

PART I INTRODUCTION TO THE LAW OF VIRTUAL AND AUGMENTED REALITY 1. The law of virtual reality and increasingly smart virtual avatars Woodrow Barfield and Alexander Williams 1. INTRODUCTION Advances in virtual and augmented reality technology, a

react-router v4 扫雷记

行成于思毁于随

08-05

1940

csdn的编辑器终于能截图了啊，比起之前试图推荐的markdown编辑器，贴图还是更好用，毕竟这里是博客不是文档^_^ 1、error: Nothing was returned from render. cause：return 后面的括号必须在同一行，如果(在下一行就会认为没有返回东西 2、warning: You should not use <Route compo...

vue-route 嵌套路由

weixin_43854764的博客

06-25

279

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="vue.js"></script> <script src="vue-router.js"></sc...

【React】React源码梳理笔记（八）

不忘初心，坚定道路！

04-29

711

本篇将react路由组件过一遍。初学时候被路由坑死了，不了解原理。现在看这些源码都不成问题，同时实现出简易的react路由一套，马上记录下。

tiny-warning.esm.js:12 Warning: Hash history cannot PUSH the same path; a new entry will not be adde

吴冬雪的博客

12-25

3222

前言： "react-router-dom":"^5.1.2" 在使用Link、NavLink （导航使用）的时候 import { NavLink } from 'react-router-dom'; <NavLink to={item.key}>{item.title}</NavLink> 可能给我们警告：原因: 这个是 react-ro...

react搭建运行打包常见错误

热门推荐

github_38928905的博客

10-16

1万+

要素： webpack.config.js中， js入口文件导出出口路径指定首页的模板指定；运行：webpack打包文件；【运行报错】---------------------------------- 1 webpack.config.js配置加载器报错： configuration.module has an unknown property 'loader...

react的报错 You should not use ‘Link’ outside a ‘Router’

Zhooson的博客

11-15

7279

环境： “react”: “^16.4.0”, “react-dom”: “^16.4.0”, “react-redux”: “^5.0.7”, “react-router”: “^4.3.1”, “react-router-dom”: “^4.3.1” 我在Header组件中写了一个Link跳转路由，一直报错误 You should not use &lt;Link&gt; outside...

React 路由报错 You should not use <Route> or withRouter() outside a <Router>

Jane_96的博客

12-03

1万+

App.js在中的代码 import React, {Component , Fragment} from 'react'; import {withRouter , Route , Switch , Redirect} from 'react-router-dom'; import './App.css'; import 'antd/dist/antd.css' import Home from...

react引用Ant Design组件遇到的坑（table）index.js:1 Warning: Each child in a list should have a unique “key“

qq_43690438的博客

12-01

1528

打印台报错，百度了一下解决办法，参考博客或者参考文章最后。如图：表格分页居中设置（在table组件里面写上，bottomCenter表示表格下方居中，6条数据分页） pagination={{ position: ['bottomCenter'], pageSize: 6 }} 表格中添加组件（例如按钮）在columns最后一项里面写组件：利用 render：（）=> 箭头函数返回组件代码：分页，报错解决方式如图：（rowKey为每一项的唯一字段名）有问题欢迎指出~ ..

warning C194: obsolete declaration: use '<type> code dmpmemorydata'