react路由的配置

最新推荐文章于 2024-04-21 21:26:48 发布
最新推荐文章于 2024-04-21 21:26:48 发布
阅读量205 收藏
点赞数
分类专栏： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/moon_comb/article/details/103526950
版权

文章目录

react路由的配置

1. 环境

安装router包：npm install --save react-router-dom

2.路由配置

  1. 新建一个router.js文件【当然，名字随你起】
  2. 引入react，react-router-dom
  3. 将新建的页面组件，没错，就是下图里的test.js引进来
  4. 按照图上的配置没错！！！
  5. path：路径，就是你访问这个页面的路径
  6. component：组件
    新建配置路由的
  7. 接下来就是应用router了，在index.js里面引入路由router,如图所示，重点已圈
    在这里插入图片描述
  8. 然后你就可以访问你的test页面啦
    test页面
moon_comb
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
第十二章 React 路由配置，路由参数获取
Etc.End的博客
12-11 2023
在React中，路由是用于管理应用程序中不同页面之间的切换和导航的机制。它允许开发人员根据用户在应用程序中的行为，如点击链接或提交表单，来切换不同的组件或页面。最为常见的就是我们的导航菜单，点击菜单以后现实相对应的页面。react-router-dom是React中非常重要的一个路由管理库，对于开发React应用程序来说是很有必要学习的。在React中，react-router-dom可以帮助我们实现页面间的跳转和导航，使得单页应用能够实现多页应用类似的切换效果。
react 路由6的配置
moajiu的博客
02-12 475
react 路由6的配置
React Router 6 中的 6 种路由配置方式：数组、代码分割、对象、函数和服务器加载
最新发布
笔记、经验、日常分享
04-21 1326
React Router 6 是一个强大的路由库，提供了多种配置路由的方式，可以满足不同的应用场景和需求。如可以使用 createBrowserRouter 或 createHashRouter 函数，以数组形式定义嵌套路由、使用 useRoutes hook 和 React.createElement，可以在函数组件中动态创建路由配置对象，实现高度灵活和可编程的路由配置。实现类似VueRouter路由的配置方式。
react 路由配置以及封装
yang423712的博客
05-14 1037
react 路由配置以及封装 1、新建App.tsx文件 import React, { Component } from 'react' import IsRouter from './router/islogin' class App extends Component { render() { return ( <IsRouter/> ); } } export default App; IsRouter是用来判断其是否登录的js文件,我通常
React路由
2301_76784640的博客
04-19 149
不是所有组件都直接与路由相连（比如拆分的子组件）的，当这些组件需要路由参数时，使用withRouter就可以给此组件传入路由参数，将react-router的history、location、match三个对象传入props对象上，此时就可以使用this.props.history跳转页面了或者接受参数了。this.props.location.query.id 获取query传递的参数据，刷新数据不在。props.history.push(url) 跳转页面可以返回上一页，保留历史记录。
react学习之路1：react基础路由配置
我不喜欢打代码的博客
03-08 289
最近接手了一个react项目的任务 之前一直没学过react的我临危受命，凭借着js的功底完成了这个任务，但是既然入坑了react，那我也来从头好好学习一下react这个框架吧（毕竟大厂都爱react） 这里我记录一下我学习react的路由配置 首先先放一下我的项目目录 应该大家都能看懂吧，接下来我们安装一下相关的依赖（react-router-dom） npm install react-router-dom --save 接下来我们创建三个页面组件（app，page1，page2），参考上面的文件结
react路由配置方式详解
08-29
本篇文章主要介绍了react路由配置方式详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
React路由鉴权的实现方法
11-30
上一篇文章中有同学提到路由鉴权，由于时间关系没有写，本文将针对这一特性对 vue 和 react 做专门说明，希望同学看了以后能够受益匪浅，对你的项目能够有所帮助，本文借鉴了很多大佬的文章篇幅也是比较长的。...
react实现同页面三级跳转路由布局
10-16
主要为大家详细介绍了react实现同页面三级跳转路由布局，一个路由小案例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
React配置路由----傻瓜教程
Qing_0124的博客
04-28 7391
----整体思路就是：就是在路由文件里配置路由，再将路由文件导入App.js,最后将App.js导入src下的index.js。 1.创建React项目： create-react-app day01react 2.安装全局和路由依赖： cnpm install -g create-react-app （仅第一次创建项目前需要） cnpm install react-router-dom@5.2.0 --save（安装6.0以下版本，因为6.0以上版本某些属性已经被迭代） 3.新建两个页面 4
React 之 Router - 路由详解
玄鱼殇
08-18 5186
1. 安装react-router。3. 跳转Link && 占位组件。四、Not Found页面配置。hook只能在函数式组件中使用。配置放到一个地方进行集中管理。1. 创建router文件夹。2. 在App.jsx中使用。1. index.js中配置。一、Router的基本使用。一、Router的基本使用。2. search传递参数。三、Navigate导航。路由高阶组件再进一步封装。2. router中配置。路由高阶组件进一步封装。1. 动态路由的方式。
React路由最全使用(N)
weixin_68658847的博客
05-05 2158
React路由最全使用(N)
React 路由详解(超详细详解)
热门推荐
chen4565的博客
07-30 1万+
React React 路由 对SPA的理解 1.单页Web应用（single page web application，SPA）。 2.整个应用只有一个完整的页面。 3.点击页面中的链接不会刷新页面，只会做页面的局部更新。 4.数据都需要通过ajax请求获取, 并在前端异步展现。 路由的理解 1.什么是路由 1.一个路由就是一个映射关系(key:value) 2.key为路径, value可能是function或component 2.路由分类 1.后端路由： 1)理解： value是fun
React路由配置
weixin_65243943的博客
07-01 2762
React路由配置
React 路由配置
We_jia的博客
04-18 3048
目录 一、路由配置 二、路由传值 2.1 静态传值 2.2动态传值 2.3 es6模板传值 2.4 传多个值 2.5 get 传值 三、配置子路由 四、编程式路由 4.1 同级路由跳转 4.2 子父路由跳转 一、路由配置 1.安装路由 cnpm install react-router-dom –save 2.配置路由 新建一个Main文件来封装路由，创建三个组件...
React路由使用步骤(含三种传参方式+编程式导航)
weixin_68658847的博客
04-21 4175
React路由使用步骤(含三种传参方式+编程式导航)
react 路由配置
晴天有何特别
06-08 4289
这是一套react路由配置使用的方案展示，若有不详细明确的地方/或者缺陷可以留言提醒,此方案有路由权限，组件内部权限，菜单导航权限，懒加载，拦截等多种配置化灵活使用
react 路由配置
05-23
React 路由可以通过 React Router 库来实现。以下是一个基本的 React 路由配置示例： 1. 安装 React Router ``` npm install react-router-dom ``` 2. 引入 React Router ```js import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; ``` 3. 在 Router 中定义路由 ```js function App() { return ( <Router> <Switch> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> <Route path="/contact" component={Contact} /> <Route path="*" component={NotFound} /> </Switch> </Router> ); } ``` 其中，`exact` 表示精确匹配路径，`path` 表示路由路径，`component` 表示对应的组件。`Switch` 表示只匹配其中一个路由，如果没有匹配到任何一个路由，则会跳转到 `NotFound` 组件。 4. 在组件中使用路由 在组件中可以使用 `Link` 组件来进行路由跳转： ```js import { Link } from 'react-router-dom'; function Home() { return ( <div> <h1>Home</h1> <ul> <li><Link to="/about">About</Link></li> <li><Link to="/contact">Contact</Link></li> </ul> </div> ); } ``` 以上就是一个简单的 React 路由配置示例。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值