阿里飞冰使用Link路由跳转报错之“react-router”与“react-router-dom”

最新推荐文章于 2022-04-09 14:36:09 发布
最新推荐文章于 2022-04-09 14:36:09 发布
阅读量1.7k 收藏
点赞数
文章标签： 阿里飞冰 Link 路由跳转 react-router react-router-dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mineblogjw/article/details/83540105
版权

需求：首页链接点击跳转二级页面

错误实现：引入路由模块，使用Link跳转（如最下面的那张图）

因为之前没有接触过react，飞冰也是新用。所以某度了很久，react路由跳转，react官方文档，各种文章，未果。飞冰创建的路由配置文件也跟大部分react路由文件写法不太一致，所以我找的很吃力。最后查看了package.json文件发现了问题所在，飞冰构建的react项目使用的是第四代的路由模块，react-router-dom，所以最后的问题就是引入错了模块包，哈哈哈哈，我真的很开心，不骗你。

解决方案：引入正确的模块react-router-dom替换react-router即可。（官方吐槽）

心得：出现问题的时候尝试从各个层面去找寻错误发生的原因，这次之后我就知道以后记得常去package.json看看。。。

 

 

shijwcc
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
飞冰 - ICE Design Pro 使用指南
weixin_33862514的博客
08-02 956
写在前面： 目前在飞冰中，我们提供了 21 套模板(后续会持续的增加)，可以在 Iceworks 的模板界面根据需求选择合适的模板进行初始化项目，然后基于区块快速搭建页面进行二次开发，减少各种环境配置和 UI 编写的时间，从而提高开发效率。 然而，这些模板或多或少都有各自的模板特征，基于不同的行业领域，其模板风格，布局方式也不尽相同，但...
React 解决 react-router-dom ^6.0.2 报错: A ＜Route＞ is only ever to be used as the child of ＜Routes＞
weixin_60463255的博客
11-27 1362
npm i react-router-dom并引入模块后编写路由，却报错: A ＜Route＞ is only ever to be used as the child of ＜Routes＞。这是因为react-router-dom^6.0.2高版本的router写法改变。如果想要遵从以前的写法，也可以修改版本依赖为低版本如^4.2.2。如果想适应新版本的写法，解决方法如下。 无论高低版本，src>index.js中引入BrowserRouter并包裹App： import R...
react-router-dom重定向报错问题
weixin_46344410的博客
08-31 647
出现报错： 原因：未输出Redirect组件 解决方法：(加个return)
安装React-router之后报错Link‘ is not exported from ‘react-router‘
m0_55645703的博客
09-08 416
原因： 可能产生的原因是React中文文档更新的滞后 按照官网上 //安装 npm install --save react-router //导入 import { Router, Route, Link } from ‘react-router’ 然后就会报错 解决办法： //安装：react-router-dom npm install react-router-dom //然后再导入 import { Router, Route, Link } from ‘react-.
React-router导入Link报错
执 。
04-29 530
按以下导入，出现“Link” is not exported from “react-router”错误 import { Router , Route , Link } from "react-router"; 解决方案 yarn add react-router-dom 或者 npm install react-router-dom 重新引入 import { BrowserRouter as Router , Route , Link } from "react-router-dom";
关于react-router/react-router-dom v4 history不能访问问题的解决
11-28
总结一下，`react-router-dom` v4版本中，要访问`history`对象，需要在应用中使用`BrowserRouter`作为顶级容器，并在子组件中声明`contextTypes`以接收`router`对象。这样，我们就可以在任何组件中实现动态的页面...
react-router-cache-route:使用类似React-Router的缓存进行路由在Vue
05-11
安装npm install react-router-cache-route --save# oryarn add react-router-cache-route用法用CacheRoute替换Route 用CacheSwitch替换Switch （因为Switch仅保留第一个匹配的状态路由，并卸载其他匹配状态的路由）...
koa-react-router：用于koa 2的react-router中间件
02-03
koaReact路由器 koa 2中间件，用于React... import reactrouter from 'koa-react-router' ; import App from './App' ; import Container from './containers/PageContainer' ; const app = new Koa ( ) ; app
react-router-dom 嵌套路由的实现
11-20
import ReactDOM from "react-dom" import App from "./App.jsx" import "babel-polyfill" const root = document.getElementById("app") if (root !== null) { ReactDOM.render(, document.getElementById("app"))...
react-router-dom-demo
07-21
在React开发中，路由管理是不可或缺的一部分，而`react-router-dom`是React社区广泛使用的路由库，它使得在单页应用（SPA）中实现页面间的导航变得简单易行。本项目"react-router-dom-demo"专注于演示如何在React...
React中低版本 ^6 以下 react-router-dom 使用时报错问题处理
一个超爱喝可乐的web前端攻城狮
12-17 783
React中低版本 ^6 以下 react-router-dom 使用时报错问题处理 安装react-router-dom npm add react-router-dom 1,在旧版本中我们写入react路由 import React from 'react' import ReactDOM from 'react-dom' import { BrowserRouter as Router, Route, Link } from 'react-router-dom' const One = ()
react-router-dom 更新版本，解决报错问题
星河梦~的博客
11-29 1674
在运行代码的时候，发现页面报如下错误： 然后检查了我的路由跳转以及路由匹配，发现没有什么问题。 那么是什么原因导致报错了呢，在仔细检查过后，发现是react-router-dom更新版本了 我用过的老版本有：^5.2.0版本， 以及^5.3.0版本。 而现在的版本是： 如果是之前的老版本，用上面的路由跳转及匹配的方法是可以的，页面可以运行。 现在的新版本，页面报错了。 解决办法： （1）在react-router-dom导入Routes模块; （2）使用Routes包裹Route，并且将原来的
阿里飞冰使用教程-前端低代码可视化GUI速开发
阿权的博客
07-29 1294
飞冰可以帮你干什么? 以往建立前端工程,需要许多繁琐的步骤,现在使用飞冰,他可以直接帮你搭出一个架子,你在这个架子的基础上再开发就行,并且使用飞冰,你的前端页面完全可以通过GUI可视化自己拼接而成,类似QT,并且飞冰还提供了许多页面模板,直接套能省去很多重复的劳动,因为我是搞Java的,前端的东西懂的不是很深,所以这个工具给偏后端的人用简直完美. 更新VSCODE到新版本,在VSCODE扩展中下载AppWorks插件; 使用模板创建一个新的工程 : 后续懒得自己总结了,看这个教程吧,很全 阿里飞冰
阿里飞冰（Iceworks）入门和飞冰是干什么的
热门推荐
海天酱油zz
02-21 1万+
前言： 昨天技术总监告诉我个框架（Iceworks），又名飞冰，是阿里旗下的一个开发工具。也没说具体这个东西能解决什么问题。所以我最终的目的是为了知道这个框架有什么用，是干什么的。 引用飞冰官网的一句话： 每个后台相互独立，同类功能也需要重复开发，前期开发成本较高 技术方案差异大，人员变动后维护成本非常高 视觉质量参差不齐，使用效率大打折扣 …… 我经过...
Ice飞冰目录结构&应用入口&工程配置&路由配置《四》
imber___zsk的博客
08-10 1705
建一个icestark微前端项目的情况下，来看这些配置(搬官网) 目录结构： ├── .ice/ # 运行时生成的临时目录 ├── build/ # 构建产物目录 ├── mock/ # 本地模拟数据 │ ├── index.js ├── public/ │ ├── index.html # 应用入口 HTML │ └── favicon.png # Favicon ├── src/ # 源码 │ ├── components/ # 自定义业务组件 │ ├── layouts/ # 布局组件 │ ├─.
Ice飞冰《配置总结》
imber___zsk的博客
08-17 1630
根据公司项目使用的配置对应着官网做一个总结，下面复制部分公司项目用作学习及参考 应用入口：app.tsx中appConfig中app app: { rootId: 'ice-container', addProvider: ({ children }) => ( <LocaleProvider locale = {locale} > {children} < /LocaleProvider>), getInitialData.
react-router4.x和react-router-dom Link组件只有路由变化页面不能跳转
HZZOU的博客
12-26 4938
关于react-router和 react-router-dom的Link标签使用时只有路由跳转，没有页面跳转的问题： 是因为在配置路由的时候，所有从首页跳转到其他页路由配置，需要在首页路由之前： 不跳转 const Routes = ()=&gt;( &lt;div className='App'&gt; &lt;Router&gt; ...
react-router-dom 中自定义 Link （custom link)
weixin_42060658的博客
02-15 3486
官网 react-router-dom自定义Link组件 1.0 自定义Link的应用场景 （如:tabtar 实现路由的切换） 2.0 实现原理：相当于自定义组件（函数式组件，注意不是class组件） 实现步骤一： 按需导入相关模块，注意 最后导入的useRouteMatch的模块是可以判断当前路由是否激活 ==实现步骤二： ==: 创建函数式组件的方式，创建一个自定义的Link组件，一定要...
react-router-dom错误
qq_27009517的博客
04-09 3050
index.tsx:24 Uncaught Error: useLocation() may be used only in the context of a <Router> component. at invariant (index.tsx:24) at useLocation (index.tsx:401) at App (App.tsx:18) at renderWithHooks (react-dom.development.js:16141) ...
react 动态修改路由_如何使用react-router-dom创建动态路由？
最新发布
06-01
使用react-router-dom创建动态路由非常简单。我们可以使用Route组件来定义路由并在其中使用动态参数。以下是如何使用react-router-dom创建动态路由的步骤： 1. 安装react-router-dom：使用以下命令安装react-router...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值