1. 全栈程序员必看首页

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

全栈程序员-站长 • • 未分类 • 阅读 61

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路由基本用法[通俗易懂]

 

 

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

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/136901.html原文链接：https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长
0 0


相关推荐

  • [Java Web – 3A] – Spring MVC开发注意事项

    [Java Web – 3A] – Spring MVC开发注意事项

    [Java Web – 3A] – Spring MVC开发注意事项

    全栈程序员-站长的头像 全栈程序员-站长
    2021年9月15日
    54
  • wifi reaver

    wifi reaver

    wifi reaverPIN码的格式很简单，八位十进制数，最后一位（第8位）为校验位(可根据前7位算出)，验证时先检测前4位，如果一致则反馈一个信息，所以只需1万次就可完全扫描一遍前4位，前4位确定下来的话，只需再试1000次（接下来的3位），校验位可通过前7为算出，就可暴力验证出pin码。所以即时你不知道校验位怎么计算，那你最多尝试10000+1000+10次=11010次就可以获得PIN，从而获得wifi…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月4日
    45
  • Python脚本到Windows可执行程序——Cxfreeze的安装与使用

    Python脚本到Windows可执行程序——Cxfreeze的安装与使用

    Python脚本到Windows可执行程序——Cxfreeze的安装与使用Python脚本到Windows可执行程序——Cxfreeze的安装与使用下载安装打包程序通过命令行简单使用使用setup.py详细配置Python脚本到Windows可执行程序——Cxfreeze的安装与使用写好的Python程序，分发到Windows用户的时候，如果再在每一台电脑上配置执行Python程序的解释器和相应的依赖库，就会比较繁琐。所以可以将Python程序打包程可执行的.exe文件。可以用的库有：cx_freeze，py2exe，P.

    全栈程序员-站长的头像 全栈程序员-站长
    2022年10月20日
    2
  • Java switch 使用枚举类

    Java switch 使用枚举类

    Java switch 使用枚举类开发过程中为了代码的可阅读性和可维护性，很多类型字段往往会习惯使用枚举去定义，可是在一些判断里面想用switch去代替ifelse就会出现以下问题publicenumSexType{MAN(1,”男”),GIRL(2,”女”),;privateinttype;privateStringwork;SexType(inttype,Stringwork){this.type=type;

    全栈程序员-站长的头像 全栈程序员-站长
    2022年7月14日
    16
  • excel多列合并关联数据[通俗易懂]

    excel多列合并关联数据[通俗易懂]

    excel多列合并关联数据[通俗易懂]假设现在有三张表第一张第二张第三张姓名与操作id相对应，现在想弄出这样的一个表，将多列数据整合起来那怎么做呢？需要用到函数vlookup这个查找值是合并时不变的那列，在这个案例下，就是指日期+姓名+操作id这三列，但是这里是不能写这么多的，只能是一列的第一个值，作为查找值，应该是像主键一样具有唯一的id。第一步，将三列合并为一列，需要用到函数concatenate公式

    全栈程序员-站长的头像 全栈程序员-站长
    2022年7月17日
    15
  • 操作系统死锁原因及必要条件

    操作系统死锁原因及必要条件

    操作系统死锁原因及必要条件

    全栈程序员-站长的头像 全栈程序员-站长
    2021年11月6日
    46

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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