首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

React 入门学习(十)-- React 路由

路由的基本使用 react-router-dom 的理解使用 专门给 web 人员使用的库 一个 react 的仓库 很常用,基本是每个应用都会使用的这个库 专门来实现 SPA 应用 首先我们要明确好页面的布局...,分好导航区、展示区 要引入 react-router-dom 库,暴露一些属性 Link、BrowserRouter... import { Link, BrowserRouter, Route }...from 'react-router-dom' 导航区的 a 标签改为 Link 标签 About</Link...,在上面我们写了两组路由,同时还会报错指示我们需要添加 Router 来解决错误,这就是需要我们添加路由器来管理路由,如果我们在 Link Route 中分别用路由器管理,那这样是实现不了的,只有在一个路由器的管理下才能进行页面的跳转工作...NavLink 标签 NavLink 标签是 Link 标签作用相同的,但是它又比 Link 更加强大。

1.6K10
您找到你想要的搜索结果了吗?
是的
没有找到

React 入门学习(十)-- React 路由

路由的基本使用 react-router-dom 的理解使用 专门给 web 人员使用的库 一个 react 的仓库 很常用,基本是每个应用都会使用的这个库 专门来实现 SPA 应用 首先我们要明确好页面的布局...,分好导航区、展示区 要引入 react-router-dom 库,暴露一些属性 Link、BrowserRouter... import { Link, BrowserRouter, Route }...from 'react-router-dom' 导航区的 a 标签改为 Link 标签 About</Link...,在上面我们写了两组路由,同时还会报错指示我们需要添加 Router 来解决错误,这就是需要我们添加路由器来管理路由,如果我们在 Link Route 中分别用路由器管理,那这样是实现不了的,只有在一个路由器的管理下才能进行页面的跳转工作...NavLink 标签 NavLink 标签是 Link 标签作用相同的,但是它又比 Link 更加强大。

1.8K10

React-Router-基本使用

之前, 所有路由代码都是统一放到 react-router 中管理的react-router4 开始, 拆分为了两个包 react-router-dom react-router-nativereact-router-dom...NavLink 注意点:NavLink 在匹配路由的时候, 是利用当前资源地址从左至右的 path 中的地址进行匹配的只要当前资源地址从左至右完整的包含了 path 中的地址那么就认为匹配默认情况下...: /home/about关于 NavLink 更多的 Api 可去官方文档进行查看:图片如上图中的我所标记出来的一个属性是设置选中激活状态下的样式,如果是模糊匹配出现的效果就是其它的 Link 状态链接的样式也会进行更改...,需要设置为精确匹配才可以达到点击那个就是那个链接的样式改变的效果。...^Route注意点: NavLink 注意点与 Route 同理图片最后本期结束咱们下次再见~ 关注我迷路,如果本篇文章对你有所帮助,或者你有什么疑问,欢迎在评论区留言,我一般看到都会回复的。

22020

React-Router 5.0 制作导航栏+页面参数传递

React中,常用的有两个包可以实现这个需求,那就是react-routerreact-router-dom。本文主要针对react-router-dom进行说明。...众所周知,JS由 DOM BOM ECMAScript 组成, React-Router-Dom 使用 BOM 提供的 history API React-Router-Dom有两种路由方式 HashRouter...React-Router-Dom 导航实现 管他三七二十一 先安装再说: yarn add react-router-dom 在使用React-Router-Dom的API之前 需要使用BrowserRouter...Link 这两个组件都是对 A链接 的一种封装 但是使用场景不太一样 如果选择导航栏的时候使用NavLink非常合适 因为他直接提供activeStyle等属性 直接聚焦在这个组件上时...style会应用给组件 Link一般作用于跳转到其他页面 实则就是A链接 React-Router-Dom 页面跳转参数传递 主要就是使用history对象进行页面跳转 API介绍: history.goBack

3.4K10
领券