AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

如何制作react的路由

2023-07-27 65
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 如何制作react的路由

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


0fcf3e0890c24caebe565f6caf037655.png


这是安装完成


5f3cdfd7b2f14db9b347665206bf560f.png


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


6c6803e2bfc2475689d2b0289cda9103.png

c3e72663af344f58ac2244e3a3873689.png


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


63209dbdeeac4380bd8288e58336f16f.png


在index.js文件里面写


eb5cf951901a4d85980dc0a40f4e70f7.png


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


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


9faf54dd5b534b1695faa3013deabadb.png


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


文章标签：
JavaScript
前端开发
关键词：
React Native路由
react.js路由
无人与我粥可温
目录
相关文章
无妄的罪
|
5月前
|
前端开发 JavaScript
React和Vue实现路由懒加载
React和Vue实现路由懒加载
无妄的罪
75 2
六卿
|
8天前
|
前端开发 JavaScript
React项目路由懒加载lazy、Suspense，使第一次打开项目页面变快
本文介绍了在React项目中实现路由懒加载的方法，使用React提供的`lazy`和`Suspense`来优化项目首次加载的速度。通过将路由组件改为懒加载的方式，可以显著减少初始包的大小，从而加快首次加载速度。文章还展示了如何使用`Suspense`组件包裹`Switch`来实现懒加载过程中的fallback效果，并提供了使用前后的加载时间对比，说明了懒加载对性能的提升作用。
六卿
27 2
React项目路由懒加载lazy、Suspense，使第一次打开项目页面变快
Star时光
|
2月前
|
移动开发 资源调度 前端开发
介绍React路由模式
【8月更文挑战第10天】介绍React路由模式
Star时光
48 12
尹正杰
|
1月前
|
前端开发 Python
React技术栈-React路由插件之自定义组件标签
关于React技术栈中React路由插件自定义组件标签的教程。
尹正杰
44 4
React技术栈-React路由插件之自定义组件标签
你都不懂
|
19天前
|
移动开发 前端开发 应用服务中间件
React两种路由模式的实现原理
React两种路由模式的实现原理
你都不懂
37 3
尹正杰
|
1月前
|
前端开发 程序员 API
React技术栈-React路由插件之react-router的基本使用
这篇博客介绍了React路由插件react-router的基本使用，包括其概念、API、以及如何通过实战案例在React应用中实现SPA（单页Web应用）的路由管理。
尹正杰
40 9
小周sir
|
2月前
|
资源调度 前端开发 数据安全/隐私保护
react动态路由权限
【8月更文挑战第29天】 react动态路由权限
小周sir
26 4
番茄酱脑袋
|
2月前
|
前端开发 JavaScript 算法
React Server Component 使用问题之想在路由切换时保持客户端状态，如何实现
React Server Component 使用问题之想在路由切换时保持客户端状态，如何实现
番茄酱脑袋
46 1
番茄酱脑袋
|
2月前
|
前端开发 JavaScript PHP
React Server Component 使用问题之路由的能力，如何实现
React Server Component 使用问题之路由的能力，如何实现
番茄酱脑袋
26 1
小周sir
|
2月前
|
移动开发 前端开发 API
React路由和HTML5 History API有什么区别
【8月更文挑战第11天】React路由和HTML5 History API有什么区别
小周sir
33 1

热门文章

最新文章

  • 1
    8 款好用的 React Admin 管理后台模板推荐
  • 2
    【react】利用prop-types第三方库对组件的props中的变量进行类型检测
  • 3
    精通React/Vue系列之实现一个全局提示(Message)组件
  • 4
    可能是最完善的 React+Vite 解决方案，阿里飞冰团队发布 icejs 2.0 版本
  • 5
    React(0.13) 定义一个input组件，使其输入的值转为大写
  • 6
    React-Native 爬坑
  • 7
    react-native-easy-app 详解与使用之（三） View，Text，Image，Flatlist
  • 8
    React Native-组件的引用
  • 9
    一段探索React自建内部构造的旅程
  • 10
    TypeScript深度剖析:React 项目中应用 TypeScript？
  • 1
    探索前端开发中的跨平台框架React Native
    86
  • 2
    IM跨平台技术学习(十)：快速对比跨平台框架Electron、Flutter、Tauri、React Native等
    413
  • 3
    React Native 运行报错 Command failed_ gradlew.bat app_installDebug -PreactNativeDevServerPort=8081
    139
  • 4
    使用React Native构建跨平台桌面应用程序
    11852
  • 5
    #yyds干货盘点# 歌谣学前端之React中渲染列表
    88
  • 6
    react实战笔记144:添加getStudentById
    62
  • 7
    react实战笔记143:修改代码
    96
  • 8
    react实战笔记147:useQuery的返回值2
    107
  • 9
    react实战笔记146:useQuery的返回值1
    92
  • 10
    react实战笔记145:缓存演示
    77

    • 相关课程

    更多
  • React 入门与实战
  • React 入门教程开发文档
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • 利用编译将 Vue 组件转成 React 组件
  • React Native 全量化实践
  • React在大型后台管理项目中的工程实践
    • 下一篇
    无影云桌面