如何制作react的路由

最新推荐文章于 2024-06-24 15:19:33 发布
最新推荐文章于 2024-06-24 15:19:33 发布
阅读量488 收藏 1
点赞数 1
分类专栏： react.js 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yjnain3066/article/details/126576209
版权

1，首先需要再你的react项目中安装react-router-dom

 这是安装完成

 安装完成后我们可以在项目里面的package.json俩里面看到是否安装成功

 

 安装成功后在你的src文件夹下创建一个router的文件夹在文件夹下创建一个index.js文件

在index.js文件里面写

 

 这个是相当于手写了一个vue的路由（这个跟vue的路由很像）

然后在你的App.js里面导入这个文件，使用useRoutes来注册一下就可以了

 然后如果后面需要添加页面，就跟vue一样是在router里面去先导入再按照这样的方式去添加即可

无人与我粥可温
关注
专栏目录
React路由
webchang的博客
12-07 1964
react路由规则，编程式导航，匹配模式，传递参数等
react项目搭建
09-27
此项目包含了 路由配置（嵌套路由） fetch请求接口 redux状态管理 webpack代理设置 蚂蚁金服ant使用 调用h5+手机摄像头功能，绝对物超所值，页面简单 但是架子稳定 涉及的知识全面
react搭建路由
果冻
10-30 897
一、路由—概念： 实现spa(单页面应用)应用：整个项目只有一个完整的页面，页面切换不会刷新整个页面（不会感觉到页面闪烁，更加贴近原生应用的体验） 二、路由—分类： 1、React-Router：提供了一些router的核心API，包括Router, Route, Switch等，但是它没有提供 DOM 操作进行跳转的API。 2、React-Router-DOM：提供了 BrowserRouter, Route, Link等 API,我们可以通过 DOM 的事件控制路由。例如点击一个按钮进行跳转，大多数情
react路由 ，项目基础搭建
nanwanLisa的博客
08-21 433
react项目搭建 案例 使用swiper来了解react第三方库实例化 1.创建项目 $ npx create-react-app 项目名 2.安装swiper $ cnpm i swiper -S 3.新建组件 4. 5.在app里面引用 6.引swiper样式 7,在组件中引入swiper 8.在官网,赋值awiper结构 9.新建css文件 10.然后在组件中引入 11.写...
React项目构建及页面路由
星河梦~的博客
12-23 2266
React项目的构建流程，以及React页面路由（含多级路由跳转）
学习 React 创建路由（超简单）
V_iolet的博客
10-04 2985
React 简单的路由跳转
react路由配置方式详解
08-29
React 路由配置方式详解 React 路由配置是 React 应用程序中一个非常重要的部分，它可以帮助我们实现客户端路由，并提供了许多有用的功能，例如参数传递、重定向等。本篇文章将详细介绍 React 路由配置的方式，并...
React路由鉴权的实现方法
10-16
在本文中，我们将深入探讨React路由鉴权的实现方法，同时也会简要提及Vue的beforeEach路由守卫作为对比。 首先，让我们理解React路由的基本概念。React Router是一个用于管理React应用程序中URL导航的库，它允许...
关于react的路由基础搭建问题
HX973661758的博客
07-16 216
这是react最基础的路由配置，有不足或者错误的地方希望大家多多指教，用的是"react-router-dom": "^5.3.0"版本
react + react-router v6 + antd5实现动态路由和动态菜单
m0_59281691的博客
04-17 5644
以上就是我对动态路由和动态菜单的实现，如果还有更好的方式也欢迎大家一起分享交流，学习学习。
React在Ant-Design菜单栏使用动态引入路由菜单语法
WebView
12-18 2003
1、方式一
react项目路由搭建
weixin_43617604的博客
04-24 431
首先我们在根目录创建 pages/main.js pages/home router / index.js 文件。npm install react-router-dom --save //最新版本6.23.0。所以我们可以在app.js中引入 RouterProvider 路由管理。main.js** 中使用Outlet 来引导子路由显示**子路由 和其他路由 根据需求自行增加即可。微信扫码体验一下 （说不定哪天你就用得上）在根目录中index.js 中能看到。
react创建路由两种方式
Bunny的博客
12-19 959
两种方式都需要下载相关依赖，依赖如下。
ReactRouter——路由配置、路由跳转、带参跳转、新route配置项
DogEgg_001的博客
06-05 7762
终于学到router了！今天主要是根据文档学的6.4相关的router，和现在常用的应该还是有点出入，肯定多看看就完事儿了！
使用 React 路由器以编程方式导航
HuntsBot的博客
01-14 1301
使用 react-router，我可以使用 Link 元素创建由 react 路由器本地处理的链接。我在内部看到它调用 this.context.transitionTo(...)。我想做一个导航。不是来自链接，而是来自下拉选择（例如）。我怎样才能在代码中做到这一点？ this.context 是什么？我看到了 Navigation mixin，但是没有 mixins 我可以这样做吗？
React页面路由
Han_Zhou_Z的博客
03-10 2539
一、页面路由 1、页面路由的方式 （1）hash模式：在url后面带# 这里的 hash 就是指 url 尾巴后的 # 号以及后面的字符。这里的 # 和 css 里的 # 是一个意思。hash也称作锚点，本身是用来做页面定位的，她可以使对应 id 的元素显示在可视区域内。 hash 本来是拿来做页面定位的，如果拿来做路由的话，原来的锚点功能就不能用了。 缺点：传递参数的方式是在url后拼接,会有体积的限制 使用到的api： window.location.hash = 'qq' //.
react+redux+antD Menu组件实现页面路由跳转
qq_40713419的博客
06-04 982
解决思路：1 Menu组件的selectedKeys属性指向当前选中的items项，应使用变量控制其显示，需要注意，这个变量需要与items项数组中的key值保持一致，否则Menu组件的选中效果将会消失。3 redux和localStorage配合使用，redux作为全局可改变与监听到的数据，localStorage存储当前页面的状态。2 页面的导航栏和侧边栏使用一个Frame组件，组件使用antD的Layout布局。需要存储当前页面路径的状态以及将左侧导航栏的选中状态与当前页面的路径保持一致。
react 后台管理系统 路由配置 左边菜单栏
tangtanglinli的博客
02-14 1718
利用react技术及ant design 所写的后台管理系统 ，主要是为了学习路由配置，记录学习
React项目-路由配置
最新发布
StupidlyGrass的博客
06-24 1520
在src/创建一个router.js文件（目录结构可以自定义）
React路由的简单使用教程
资源摘要信息: "路由react简单使用简单的简单的" 本文将详细阐述React.js中路由的简单使用方法。React.js是一个用于构建用户界面的JavaScript库，由Facebook团队开发。它的核心思想是将UI分解为独立的组件，然后...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

无人与我粥可温

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值