如何制作react的路由

最新推荐文章于 2024-02-16 00:59:54 发布
最新推荐文章于 2024-02-16 00:59:54 发布
阅读量460 收藏 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里面去先导入再按照这样的方式去添加即可

无人与我粥可温
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
react路由配置方式详解
12-09
本文介绍了react路由配置，最近刚开始学，分享给大家，顺便给自己留个笔记。 包含了LInk跳转以及js触发跳转并传参。 这是项目的目录结构，主要的代码都在src目录下，src下面新建一个containers文件夹放我们的一些组件，router文件夹是配置路由用的。 按照顺序来写：detail文件夹下的代码 import React from 'react' class Detail extends React.Component { render() { return ( <p>Detail，url参数：{this.props.params.id}</p>
react ant-design实现导航菜单menu的路由设置/切换页面
热门推荐
weixin_45667289的博客
12-28 1万+
react+ant-design实现导航菜单menu的路由设置或切换页面
react+ts【项目实战一】配置项目/路由/redux
最新发布
weixin_46738453的博客
02-16 1717
return (发现音乐我是downLoad的插槽{useRoutes(routes)}
react项目搭建
09-27
此项目包含了 路由配置（嵌套路由） fetch请求接口 redux状态管理 webpack代理设置 蚂蚁金服ant使用 调用h5+手机摄像头功能，绝对物超所值，页面简单 但是架子稳定 涉及的知识全面
react搭建路由
果冻
10-30 835
一、路由—概念： 实现spa(单页面应用)应用：整个项目只有一个完整的页面，页面切换不会刷新整个页面（不会感觉到页面闪烁，更加贴近原生应用的体验） 二、路由—分类： 1、React-Router：提供了一些router的核心API，包括Router, Route, Switch等，但是它没有提供 DOM 操作进行跳转的API。 2、React-Router-DOM：提供了 BrowserRouter, Route, Link等 API,我们可以通过 DOM 的事件控制路由。例如点击一个按钮进行跳转，大多数情
react路由 ，项目基础搭建
nanwanLisa的博客
08-21 402
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 1915
React项目的构建流程，以及React页面路由（含多级路由跳转）
学习 React 创建路由（超简单）
V_iolet的博客
10-04 2806
React 简单的路由跳转
React路由鉴权的实现方法
10-16
主要介绍了React路由鉴权的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
React 路由懒加载的几种实现方案
10-17
主要介绍了React 路由懒加载的几种实现方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
React路由管理之React Router总结
08-27
React项目通常都有很多的URL需要管理，最常使用的解决方案就是React Router了，本篇文章主要介绍了React路由管理之React Router总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
关于react的路由基础搭建问题
HX973661758的博客
07-16 185
这是react最基础的路由配置，有不足或者错误的地方希望大家多多指教，用的是"react-router-dom": "^5.3.0"版本
React在Ant-Design菜单栏使用动态引入路由菜单语法
WebView
12-18 1944
1、方式一
React页面路由
Han_Zhou_Z的博客
03-10 2256
一、页面路由 1、页面路由的方式 （1）hash模式：在url后面带# 这里的 hash 就是指 url 尾巴后的 # 号以及后面的字符。这里的 # 和 css 里的 # 是一个意思。hash也称作锚点，本身是用来做页面定位的，她可以使对应 id 的元素显示在可视区域内。 hash 本来是拿来做页面定位的，如果拿来做路由的话，原来的锚点功能就不能用了。 缺点：传递参数的方式是在url后拼接,会有体积的限制 使用到的api： window.location.hash = 'qq' //.
react+redux+antD Menu组件实现页面路由跳转
qq_40713419的博客
06-04 741
解决思路：1 Menu组件的selectedKeys属性指向当前选中的items项，应使用变量控制其显示，需要注意，这个变量需要与items项数组中的key值保持一致，否则Menu组件的选中效果将会消失。3 redux和localStorage配合使用，redux作为全局可改变与监听到的数据，localStorage存储当前页面的状态。2 页面的导航栏和侧边栏使用一个Frame组件，组件使用antD的Layout布局。需要存储当前页面路径的状态以及将左侧导航栏的选中状态与当前页面的路径保持一致。
react 后台管理系统 路由配置 左边菜单栏
tangtanglinli的博客
02-14 1592
利用react技术及ant design 所写的后台管理系统 ，主要是为了学习路由配置，记录学习
用React搭建一个简单的菜单系统
前端小东
09-23 1003
用react搭建一个简单的菜单列表，点击跳转菜单详情，作为Demo学习使用。 先来个效果图 话不多说，上代码 1：搭建一个react项目 create-react-app my-react 2：安装url模块，方便解析url地址，获取参数，安装axios，发送get请求 cnpm install url axios -S 3:启动项目，将静态文件html、css、拷贝到src/static下面 4：新建一个router.js用来实现路由跳转 router.js import React from "r
React路由 简单实现一个导航
sunling的专栏
03-02 4058
贴出结果先~ 点击类似a标签，跳转加载相应的组件使用react-router-dom路由包react-router-dom：随着react生态环境的壮大，后出现的包，这个包比react-router包轻巧了很多。代码：exact 指精确匹配配置文件package.json   webpack.config.js 参考上一篇文章。...
React的项目创建及路由配置流程
biaoyan01的博客
11-10 949
React的项目创建及路由配置流程 不知不觉，感觉自己应该大大小小创建了几十次的react的项目了。不管是出于练习的demo还是为了那些不大不小的项目，但是很多时候都是对着文档走一遍流程，很少自己去完完整整的记录下，这也是当今很多时候的一个老毛病，知其然不知其所以然，今天就梳理一下吧 1.react的运行环境 首先需要明白react的基础是JavaScript。这里我们讲的是比较常用的单页面应用，所以我们需要用到的是 Create React App,这个首先需要我们的电脑有node。推荐的版本是12.
react路由哈希路由
03-31
React路由有两种主要的路由方式：哈希路由和浏览器路由。 哈希路由是指在URL中使用#符号，例如：`http://example.com/#/home`。这种方式的好处是可以避免页面刷新，因为每次URL的改变只会触发hashchange事件，而...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

无人与我粥可温

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

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

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

打赏作者

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

抵扣说明：

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

余额充值