React路由基本用法[通俗易懂]

React路由基本用法[通俗易懂]React路由基本用法1.ReactRouter4.0基本概述:ReactRouter4.0(以下简称RR4)遵循React的设计理念,即万物皆组件。所以RR4只是一堆提供了导航功能的组件(还有若干对象和方法),具有声明式(声明式编程简单来讲就是你只需要关心做什么,而无需关心如何去做,可组合性的特点。RR4采用单代码仓库模型架构(monorepo),这意味者这个仓库里面有…

大家好,又见面了,我是你们的朋友全栈君。

React路由基本用法

1.React Router4.0基本概述:

React Router4.0(以下简称 RR4)遵循React的设计理念,即万物皆组件。所以 RR4 只是一堆 提供了导航功能的组件(还有若干对象和方法),具有声明式(声明式编程简单来讲就是你只需要关心做什么,而无需关心如何去做,可组合性的特点。

RR4 采用单代码仓库模型架构(monorepo),这意味者这个仓库里面有若干相互独立的包,分别是:

  • react-router React Router 核心
  • react-router-dom 用于 DOM 绑定的 React Router
  • react-router-native 用于 React Native 的 React Router
  • react-router-redux React Router 和 Redux 的集成
  • react-router-config 静态路由配置的小助手

2.react-router-dom怎样使用?

1.react-router-dom和react-router的关系:

在 React 的使用中,我们一般要引入两个包,react 和 react-dom,那么 react-router 和react-router-dom 是不是两个都要引用呢?其实他们两个只要引用一个就行了,因为react-router-dom里面依赖于react-router(“react-router-dom包含react-router”的关系),如下图所示;

React路由基本用法[通俗易懂]

2.react-router-dom和react-router的区别:

它们之间的不同之处就是react-router-dom比react-router多出了 <Link> <BrowserRouter> 这样的组件;

3.react-router-dom的基本用法:

react-router-dom的API在网上能搜索到一大堆,这里不啰嗦了;直接上怎么用?

1.先用create-react-app脚手架工具,初始化项目名为react19的项目,完成目录结构如下:

React路由基本用法[通俗易懂]

2.然后使用命令yarn add react-router-dom或cnpm install react-router-dom安装react-router-dom依赖包并在App.js中初始化路由配置;

React路由基本用法[通俗易懂]

基本总结:

1.<BrowserRouter>组件:Router是BrowserRouter的别名,它表示BrowserRouter本身。而BrowserRouter使用了H5 Histroy API高阶路由组件;

2.<Switch>组件:它的作用是只渲染出第一个与当前访问地址匹配的<route>和<redireact>组件;

3.<Route/>组件:当地址URL和path属性设置的值匹配时,渲染出相应的UI组件界面;

4.<HashRouter>组件:它的作用主要利用Hash值的原理进行地址—UI匹配,在RR4中并没有抛弃,但是不建议使用;熟悉vue-router的可以知道,它跟vue-router匹配原理一样;

5.<NavLink>组件:主要用于导航拥有激活状态准备的;它和Link的路由匹配效果一致;不同的是NavLink有状态标记,Link无状态标记,如下面效果实现就建议使用NavLink;

React路由基本用法[通俗易懂]

NavLink用法如下:

<NavLink to="/one" activeClassName="actived"></NavLink>

以上是React-Router-Dom的基本组件和API解释,详情请百度之;

3.通过运行npm start命令就可以启动服务器查看效果:

React路由基本用法[通俗易懂]

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/136901.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 手写算法-python代码实现Lasso回归

    手写算法-python代码实现Lasso回归手写算法-python代码实现Lasso回归Lasso回归简介Lasso回归分析与python代码实现1、python实现坐标轴下降法求解Lasso调用sklearn的Lasso回归对比2、近似梯度下降法python代码实现LassoLasso回归简介上一篇文章我们详细介绍了过拟合和L1、L2正则化,Lasso就是基于L1正则化,它可以使得参数稀疏,防止过拟合。其中的原理都讲的很清楚,详情可以看我的这篇文章。链接:原理解析-过拟合与正则化本文主要实现python代码的Lasso回归,并用实例佐证原

  • Matlab 计算均方误差MSE的三种方法

    Matlab 计算均方误差MSE的三种方法Matlab计算均方误差MSE的三种方法数据说明:ytest测试集y,真实的y值,是一维数组;ytest_fit基于测试集x预测的y值,是一维数组;test_error是预测误差。第一种方法直接使用matlab中的mse函数,亲测可用。/*ytest测试集y,真实的y值,是一维数组ytest_fit预测的y值,是一维数组test_error是预测误差*/test_error=ytest-ytest_fit;test_mse=mse(test_er

  • ToF相机学习笔记之基本知识

    ToF相机学习笔记之基本知识ToF相机属于一种非接触式光学传感器,通过计算发射激光的飞行时间获取对应像素的深度信息。就非接触式距离测量方法而言,其分类可用下表表示如下:1.1ToF传感器基础一个逐点式的ToF传感器采用了雷达原理估计场景点的径向距离。简单来说,就是通过计算光从发射到经场景点反射后的飞行时间。为了测量整个场景表面而不是几个场景点,很多距离测量系统集成了一个逐点式ToF传…

  • 河北省理科2001——2010年一分一档表[通俗易懂]

    河北省理科2001——2010年一分一档表[通俗易懂]VirtualBox.bat:C:cd”\ProgramFiles\Oracle\VirtualBox”VBoxManagestartvm”CentOS-6.5″–typeheadless

  • Microsoft store应用商店无法加载页面代码: 0x80131500

    Microsoft store应用商店无法加载页面代码: 0x80131500Microsoftstore应用商店无法加载页面代码:0x80131500出错后我在微软官网查找问题原因,以下设置都可能解决问题:原文建议先尝试更换网络连接,比如连接个人手机热点,再使用MicrosoftStore进行尝试。如果您连接了VPN或下载了第三方防火墙应用,建议断开VPN,卸载第三方防火墙应用。①调整网络连接…

  • Chrome 小工具: 启动本地应用 (Native messaging)

    Chrome 小工具: 启动本地应用 (Native messaging)

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号