解决create React-app脚手架中路由组件跳转及传参问题（1）

最新推荐文章于 2022-10-25 13:12:49 发布
VIP文章 最新推荐文章于 2022-10-25 13:12:49 发布
阅读量430 收藏
点赞数
分类专栏： React 文章标签： 前端 react 前端框架 react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58576761/article/details/125689159
版权

一、通过Link跳转页面，在路由path后使用 ？拼接传参(只能传基本类型数据)

传递数据的 Home.jsx 页面，在使用Link跳转路由页面时，将数据拼接到路由path 后面，参数与路径之间用 ？分隔，数据与数据之间用 & 分隔

 接收Link路径传参的方式              

        1. 使用 useLocation 组件（不推荐使用）

     引入

        useLocation方法必须写在函数内部，如果使用的是React-class类组件，就不能直接使用，因此需要封装高阶组件，将接收数据的List.jsx 页面，作为参数传入该组件，该组件以props传参的方式，将经过实例化的useLocation传给List.jsx组件

注意：引入和下面的实例化内容，都是写在封装的高阶组件内，不是写在页面路由组件内！不知道怎么封装高阶组件的小伙伴，可以看我之前的文章

 在List.jsx 页面

最低0.47元/天 解锁文章
前端冲浪手
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决create React-app脚手架中路由组件跳转及传参问题（2）
weixin_58576761的博客
07-09 555
解决create React-app脚手架中路由组件跳转及传参问题-----一、通过 state 属性传参(基本数据 二、复杂数据类型)、通过Link跳转页面，在路由path后使用 ？拼接传参(只能传基本类型数据) 三、在路径中 / 后传递动态参数(例：/:id)......
react create-react-app v5 配置路由(报错及注意事项)
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
09-27 1030
react create-react-app 配置路由报错(Uncaught TypeError: Cannot read properties of null (reading 'useRef'))
create-react-app安装出错问题解决方法
01-19
create-react-app慢的解决方法 在操作官方实例Create React App时,需要执行指令： create-react-app my-app 来创建一个新的React应用。由于某原因,在拉取各种资源时,往往会巨慢,一直卡在 fetchMetadata: sill mapToRegistry uri http://registry.npmjs.org/whatwg-fetch 解决方案是换源,虽然平常使用cnpm来代替npm,但也只是使用新的指令而已，而在寻求create-react-app的相关配置希望修改registry时失败了，最后发现create-react-app
React 路由跳转及传参问题
qq_36437172的博客
10-21 710
一、路由的跳转 （一）DOM跳转 在需要跳转的页面导入import {Link} from 'react-router-dom'，在需要跳转的地方使用link标签的to属性进行跳转，路由配置文件中导出的那个类名相当于相当于router-view标签，在需要展示的地方引入这个类来展示。 1、在路由配置文件中配置路由 import Home from './containers/Home';...
create-react-app路由的实现原理
热门推荐
云
10-17 1万+
create-react-app中路由的简要阐述 用create-react-app创建出来的应用为单页面应用，什么意思呢？就是说在你的浏览器的地址栏输入地址按下回车键的一瞬间，浏览器会向服务器发送一次请求，请求一个html页面，之后的所有能看见的页面的跳转等等都是基于这个页面实现的，换句话说浏览器不会再向服务器请求其他的页面请求发送到服务器之后，服务器会返回一个常常的html页面字符串，然后浏
react实现路由跳转
qq_53008791的博客
08-13 9013
react路由跳转
Vue3 入口文件createApp函数
且听风吟的博客
04-14 7767
Vue3 通过使用 createApp 函数来创建应用。
【vue3源码学习】初始化流程分析：渲染器与 createApp
sinat_33255495的博客
10-25 825
学习 vue3 源码，是不是一时不知道从哪里入手？不了解哪些有依赖关系，哪些能做什么事？今天我们就 vue 项目的初始化流程进行分析。
react的路由传参和接参
zhangyuea的博客
05-16 3171
react的路由传参和接参 传参 //路由传参写在 to 属性后面，必须是一个对象的形式，两个大括号，第一个大括号表示js语法，第二个大括号表示对象，可以传三个参数，pathname：路由名称，search：路径中的参数，state：数据 <NavLink activeClassName = "active" to = { { ...
关于在create-react-app项目中配置HashRouter或BrowserRouter时传参的问题整理
weixin_39893889的博客
10-14 1437
关于在create-react-app项目中配置HashRouter以及BrowserRouter进行传参
create-react-redux-app：基于create-react-app的React样板
02-05
创建React Redux应用 该项目是通过。 该项目包括额外的redux软件包和改进的文件结构。...git clone [email protected]:YUzhva/create-react-redux-app.git NEW_PROJECT_NAME # with HTTPS git clone https://g
create-react-app构建项目慢的解决方法
01-19
create-react-app慢的解决方法 在操作官方实例Create React App时,需要执行指令： create-react-app my-app 来创建一个新的React应用。由于某原因,在拉取各种资源时,往往会巨慢,一直卡在 fetchMetadata: sill ...
create-react-app-esbuild:在您的create-react-app中使用esbuild进行更快的编译，开发和测试
05-13
:rocket: create-react-app-esbuild :rocket: 在您的使用可以更快地进行编译，开发和测试。特征在开发过程中用esbuild替换babel-loader 用esbuild替换babel-loader以加快构建时间用esbuild替换terser，以加快构建...
npx create-react-app xxx创建项目报错的解决办法
11-21
手头有一台大学时代的Windows电脑，它此前没有装过create-react-app，只装了node环境。版本信息：node -> 10.16.3，npm -> 6.9.0。前几日闲的无事想给它装个React，结果失败了，报了错，所以有了下面这出。 安装过程...
React 路由参数传递
qq_35605231的博客
04-07 1288
React路由可以处理明确的url，也可以动态的去匹配 url中的参数路径。 传参方式有三种： 方式一： 通过params 1.路由表中 <Routepath=' /sort/:id ' component={Sort}></Route>　　　　　　　　　　　 2.L...
create-react-app新版本快速搭建一个简易的路由页面
业余前端的职业经历
01-25 948
因为create-react-app 没有给我默认搭建路由所以只能让我们自己去搭建了 不过 简单的路由还是很快可以搭建好的 npm i react-router-dom --save or yarn add react-router-dom --save 这里是 react-router-dom v6版本的哈 然后就是使用了 index.js import { BrowserRouter } from 'react-router-dom' ReactDOM.render( <BrowserR
create-react-app 工程配置路由router（子路由）
黄彪博客
08-07 6928
创建路由 运行在浏览器环境中，我们应当安装react-router-dom。react-router-dom暴露出react-router中暴露的对象与方法，因此你只需要安装并引用react-router-dom即可。 cnpm install -D react-router-dom 在index.js中添加 import React from 'react'; import ReactDOM ...
create-react-app的安装与路由
Hillbox
07-18 1546
1、安装命令 npm install -g create-react-app create-react-app my-app 在当前目录下会看到安装好的my-app文件夹。其中，入口文件是App.js。   2、学习路由 在youtube上看到不错的路由教程： https://www.youtube.com/watch?v=91F8reC8kvo 使用的编译器是VScode，但是h...
create-react-app 配置路由
weixin_57156917的博客
09-02 1298
1.下载路由的核心中间件 npm install react-router-dom react-router-config -S 2.在src中的index里引入中间件，并修改 代码如下： import {HashRouter as Router} from 'react-router-dom' <Router> <App /> </Router>, 3.在src里面建一个文件，里面在创建Index.js和List.js I..
create-react-app 父子组件传参
最新发布
10-13
在 React 中，父组件可以通过 props 将数据传递给子组件。具体实现方式如下： 1. 在父组件中定义一个 state，存储需要传递给子组件的数据。 2. 在父组件中通过 props 将数据传递给子组件。 3. 在子组件中通过 props...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值