首页 > 其他分享 >React路由 基础:react-router-dom

React路由 基础:react-router-dom

时间:2024-06-03 14:21:36浏览次数:10  
标签:React 方式 dom Route react 参数 跳转 组件 路由

这里简单介绍一下react路由基础的知识,以及基础操作

一,安装命令

npm install react-router-dom

二,路由模式

1.ReactRouter支持两种路由模式:BrowserRouter和HashHistory。

2.BrowserRouter使用URL中的/来定义路由,例如:http://xxx.com/Search

3.HashHistory使用URL中的#来定义路由,例如:http://xxx.com/#/Search

三,常用路由组件

BrowserRouter组件

1.一个app应用中最好只有一个BrowserRouter组件,最好放在最顶层所有组件之外,这样可以确保内部组件在使用Link做路由跳转时不会出现出错

Routes组件

1.用于将多个Route组件组合在一起。

Route组件

1.Route组件用于定义路由规则,组件可以嵌套使用,用于定义更复杂的路由规则。

2.Route的path属性用于定义路由的路径

3.Route的element属性用于定义路由对应的组件,element属性值必须写成标签的形式。

4.Route的index属性用于指定默认子路由。

Link组件

1.组件用于创建路由链接,类似于<a>标签

2.Link的to属性用于指定连接地址,它的值可以是字符串还可以是一个location对象。

四,传递参数

传递参数三种方式

search传参方式,例如:http://localhost:3000/fbetList?key=Michael

params传参方式,例如:http://localhost:3000/fbetList/Michael

state传参方式,例如:navigate('/home', { state: { key: 'Michael' } });

1.search方式传递参数

2.search方式接收参数

2.params方式传递参数

4.params方式接收参数

 注意:

1.首先要配置正确路由路径,即正确的<BrowserRouter>、<Routes>、<Route>标签设置

2.navigate方法跳转的路径如果没有配置<Route>标签,那么跳转会发生未知的错误。

3.navigate方法跳转方式要与<Route>标签配置的跳转方式一致。

4.接收参数的方式要与路由跳转传递参数的方式一致。

标签:React,方式,dom,Route,react,参数,跳转,组件,路由
From: https://www.cnblogs.com/michaelShao/p/18228821

相关文章

  • 【Python】生成html文档-使用dominate
    原文地址:https://www.cnblogs.com/kaerxifa/p/13035376.htmldominate简介dominate是一个使用优雅的DOMAPI创建和操作HTML文档的Python库。使用它能非常简洁地编写纯Python的HTML页面,这消除了学习另一种模板语言的需要,利用Python更强大的特性。 首先安装依赖:pipinstall......
  • React(五)UseEffect、UseRef
    (一)useEffectuseEffect–React中文文档 useEffecthook用于模拟以前的class组件的生命周期,但比原本的生命周期有着更强大的功能1.类组件的生命周期在类组件编程时,网络请求,订阅等操作都是在生命周期中完成importReact,{Component}from'react'exportdefaultc......
  • JSAPI:DOM操作
    DOM操作WebAPIAPI:预定好的函数例如:alert(),console.log(),prompt()WebAPI:浏览器提供的一套操作浏览器功能和页面元素的API(BOM,DOM),DOM的顶级对象是documentBOM的顶级对象是window节点:页面中的所有内容都是节点(标签,属性,注释,文本)获取元素的方法document.getElementBy......
  • 【Web API DOM02】如何获取、操作DOM元素
    一:获取DOM元素1根据CSS选择器获取语法格式如下:(1)选中一个DOM元素document.querySeletor('CSS选择器')<ul><li>1</li><li>2</li><li>3</li></ul>document.querySelector('li')//只能获取第一个li该选择器只能选中第一个DOM元......
  • 【vue源码】虚拟DOM和diff算法
    虚拟DOM与AST抽象语法树的区别虚拟DOM是表示页面状态的JavaScript对象,(虚拟DOM只有实现diff算法)而AST是表示代码语法结构的树形数据结构。虚拟DOM通常用于优化页面渲染性能,而AST通常用于进行代码静态分析、代码转换等操作。(AST主要执行compiler编译)什么是虚拟DOM?用JavaSc......
  • react 怎样配置ant design Pro 路由?
    AntDesignPro是基于umi和dva的框架,umi已经预置了路由功能,只需要在config/router.config.js中添加路由信息即可。例如,假设你需要为HelloWorld组件创建一个路由,你可以将以下代码添加到config/router.config.js中:在menu.ts中设置菜单标题:exportdefault{'......
  • 【图解IO与Netty系列】Reactor模型
    Reactor模型Reactor模型简介三类事件与三类角色Reactor模型整体流程各种Reactor模型单Reactor单线程模型单Reactor多线程模型主从Reactor模型Reactor模型简介Reactor模型是服务器端用于处理高并发网络IO请求的编程模型,与传统的一请求一线程的同步式编程模型不同的......
  • ref和reaction的区别(以及TS中ref,computed函数会自动推断定义其泛型(一般不用自己动手))
    其次就是了解ref,reactive的区别。ref通过对象名.value来访问对象里的值,若对象里还有属性则访问其需要:对象名.value.属性名reactive则通过:对象名.属性名,来直接访问属性值其次,两者都是响应式对象。但如果对直接对reactive对象进行赋值,那么其会丢失响应性。代码示例如下:<scri......
  • CSS实现dom脱离文档流定位固定位置的操作代码
    在CSS中,如果你想让一个DOM元素脱离文档流并固定在一个特定的位置,你通常会使用position属性,并为其指定fixed、absolute或relative值。但是,fixed是最常用于将元素固定在视口(viewport)的某个位置,而不管页面滚动如何。下面是一个使用position:fixed;的示例,它将一个元素固定在屏幕的右......
  • 【React】实现一个基本的防抖函数
    函数防抖(debounce),就是指触发事件后,在n秒内函数只能执行一次,如果触发事件后在n秒内又触发了事件,则会重新计算函数延执行时间(在这里和函数节流区分一下,函数节流是在触发完事件之后的一段时间之内不能再次触发事件)。实现:1consttimer=useRef<any>(null)//react中可用方......