react-router-dom入门使用教程(路由的模糊匹配与严格匹配)

目录
  • 模糊匹配
  • 开启严格匹配
  • Redirect的使用
  • 嵌套路由使用

模糊匹配

<!-- 编写路由链接 -->
<NavLink to="/home/a/b">Home</NavLink>
<!-- 注册路由 -->
<Switch>
  <Route path="/home" component={Home} />
</Switch>

点击Home，进入路径/home/a/b，此时模糊匹配到/home路径的组件{Home}。

开启严格匹配

<!-- 编写路由链接 -->
<NavLink to="/home/a/b">Home</NavLink>
<!-- 注册路由 -->
<Switch>
  // 开启严格匹配：exact={true}
  <Route exact path="/home" component={Home} />
</Switch>

此时，点击Home，进入路径/home/a/b，无法匹配/home路径下的{Home}组件。

1.默认使用的就是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致。
2.开启严格匹配：

// 开启严格匹配：exact={true}
<Route exact path="/home" component={Home} />

3.严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由

Redirect的使用

路由重定向

{/* 注册路由 */}
<Switch>
  <Route path="/about" component={About} />
  <Route path="/home" component={Home} />
  <Redirect to="/home" />
</Switch>

一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由。

嵌套路由使用

注册子路由时要写上父路由的path值。 => /父路由path/子路由path。

路由的匹配是按照注册路由的顺序进行的。

src项目结构

├─App.jsx
├─index.js
├─pages
|   ├─Home
|   |  ├─index.jsx
|   |  ├─News
|   |  |  └index.jsx
|   |  ├─Message
|   |  |    └index.jsx
|   ├─About
|   |   └index.jsx
├─components
|     ├─MyNavLink
|     |     └index.jsx
|     ├─Header
|     |   └index.jsx

Message是Home的子组件，News组件是Home的子组件
例如：注册Message组件时需要加上父路由Home的path值：/home/message

<Switch>
  <Route path="/home/news" component={News} />
  <Route path="/home/message" component={Message} />
  <Redirect to="/home/news" />
</Switch>

到此这篇关于react-router-dom入门使用教程(路由的模糊匹配与严格匹配)的文章就介绍到这了,更多相关react-router-dom使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • react-router-dom V6的配置使用实践

    目录 一.关于书写方面 二.路由的嵌套方面优化 三.关于路由的灵活配置化 四.关于路由鉴权方面 最近在搭建PC项目的React框架,涉及到React Router,开发同学有时就需要去尝试点新的东西,在开发过程中才不会枯燥的,基于这个理念推动,就在搭建的时候用V6的版本开始了(虽然只是个新版本,也不算啥新东西)...... V6的版本相对于V5,做了很多的优化,有书写方面的.路由的嵌套.路由配置化.鉴权方面等等,下面就简单的介绍下如何使用 一.关于书写方面 路由注册的时候由的Switch改为了R

  • react-router-dom入门使用教程(前端路由原理)

    react-router-dom入门使用教程(前端路由原理)

    目录 React路由相关理解 SPA的理解 路由的理解 前端路由原理(重点) react-router-dom@5 基本路由使用 一般组件与路由组件 路由API:Switch提高路由匹配效率(单一匹配) React路由相关理解 SPA的理解 单页WEB应用(single page web application , SPA).整个应用只有一个完整的页面.点击页面的链接不会刷新页面,只会做页面的局部更新数据都需要通过ajax请求获取,并在前端异步展现. 路由的理解 1. 什么是路由? 一个路由就是

  • react-router-domV6版本的路由和嵌套路由写法详解

    目录 1-单级路由 2-嵌套路由(about路径进行嵌套) ReactRouterv6使用路由嵌套和重定向 1 - 单级路由 <NavLink to="/home">Home</NavLink> <NavLink to="/about">about</NavLink> <Routes>   <Route path='/home' element={<Home/>}/>   <R

  • 详解react-router-dom v6版本基本使用介绍

    目录 Routes Route Navigate NavLink useRoutes 嵌套路由 路由传参 编程式导航 Routes 代替Switch组件,不会向下匹配 用来包裹Route Route 必须被Routes组件包裹 component属性变成element caseSensitive 路径大小写敏感属性,默认是不敏感(访问/about = /ABOUT) index 与path属性是互斥的,index表示为当前路由的根 可以用作layout组件,不写element属性,写了要与 Ou

  • react-router-dom6(对比 router5)快速入门指南

    react-router-dom6(对比 router5)快速入门指南

    目录 React Router 6 快速上手 1.概述 2.基本使用 3.重定向 4.NavLink高亮 5.useRoutes路由表 6.嵌套路由(Outlet) React Router 6 快速上手 在之前的文章中,我们已经学习了react-router-dom v5的内容,在react-router-dom v6版本中,对旧版本的API以及一些组件做了些许修改.本文开始,我将带大家学习最新的react-router-dom v6版本的路由知识,并且会与v5老版本进行一些对比. 需要学习r

  • react-router-dom v6 通过outlet实现keepAlive 功能的实现

    react-router-dom v6 通过outlet实现keepAlive 功能的实现

    本文主要介绍了react-router-dom v6 通过outlet实现keepAlive 功能的实现,具体如下: keepAlive代码: import React, { useRef, useEffect, useReducer, useMemo, memo } from 'react' import { TransitionGroup, CSSTransition } from 'react-transition-group' import { useLocation } from 'r

  • react-router-dom入门使用教程(路由的模糊匹配与严格匹配)

    react-router-dom入门使用教程(路由的模糊匹配与严格匹配)

    目录 模糊匹配 开启严格匹配 Redirect的使用 嵌套路由使用 模糊匹配 <!-- 编写路由链接 --> <NavLink to="/home/a/b">Home</NavLink> <!-- 注册路由 --> <Switch> <Route path="/home" component={Home} /> </Switch> 点击Home,进入路径/home/a/b,此时模糊匹

  • react router零基础使用教程

    react router零基础使用教程

    目录 安装 配置路由 添加一个新页面测试路由 配置未找到的路由 跳转页面 通过 js 通过 dom 嵌套页面 安装 既然学习 react router 就免不了运行 react 安装 react npx create-react-app my-appcd my-appnpm start 安装 react router npm install react-router-dom 如果一切正常,就让我们打开 index.js 文件. 配置路由 引入 react-router-dom 的 RouterP

  • react router 4.0以上的路由应用详解

    本文介绍了react router 4.0以上的路由应用,分享给大家,具体如下: 在4.0以下的react router中,嵌套的路由可以放在一个router标签中,形式如下,嵌套的路由也直接放在一起. <Route component={App}> <Route path="groups" components={Groups} /> <Route path="users" components={Users}> <Rou

  • React Router V4使用指南(精讲)

    一.前端路由和后端路由 1)后端路由 多页应用中,一个URL对应一个HTML页面,一个Web应用包含很多HTML页面,在多页应用中,页面路由控制由服务器端负责,这种路由方式称为后端路由. 多页应用中,每次页面切换都需要向服务器发送一次请求,页面使用到的静态资源也需要重新加载,存在一定的浪费.而且,页面的整体刷新对用户体验也有影响,因为不同页面间往往存在共同的部分,例如导航栏.侧边栏等,页面整体刷新也会导致共用部分的刷新. 2)前端路由 在单面应用中,URL发生并不会向服务器发送新的请求,所以"逻

  • react hooks入门详细教程

    State Hooks 案例: import { useState } from 'react'; function Example() { const [count, setCount] = useState(0); //count:声明的变量:setCount:改变count值的函数:0:count的初始值 return ( <div> <p>You clicked {count} times</p> <button onClick={() => set

  • React路由管理之React Router总结

    React项目通常都有很多的URL需要管理,最常使用的解决方案就是React Router了,最近学习了一下,主要是看了一下官方的英文文档,加以总结,以备后查. React Router是做什么的呢,官方的介绍是: A complete routing library for React,keeps your UI in sync with the URL. It has a simple API with powerful features like lazy code loading, dy

  • React Router v4 入坑指南(小结)

    距离React Router v4 正式发布也已经过去三个月了,这周把一个React的架子做了升级,之前的路由用的还是v2.7.0版的,所以决定把路由也升级下,正好"尝尝鲜"... 江湖传言,目前官方同时维护 2.x 和 4.x 两个版本.(ヾ(｡ꏿ﹏ꏿ)ﾉﾞ咦,此刻相信机智如我的你也会发现,ReactRouter v3 去哪儿了?整丢了??巴拉出锅了???敢不敢给我个完美的解释!?)事实上 3.x 版本相比于 2.x 并没有引入任何新的特性,只是将 2.x 版本中部分废弃 API 的

  • Next.js入门使用教程

    目录 简介 创建Next.js项目 手动创建Next.js项目 creact-next-app快速创建项目 Pages 路由 Link Router 参数传递与接收 动态路由 钩子事件 获取数据 getStaticProps 构建时请求数据 getServerSideProps 每次访问时请求数据 CSS支持 添加全局样式表 添加组件级CSS 简介 Next.js 是一个轻量级的 React 服务端渲染应用框架. 官网链接:www.nextjs.cn/ 优点: 零配置 自动编译并打包.从一开始就

  • Vue.js 十五分钟入门图文教程

    TypeScript 为 JavaScript 带来静态类型检查,让 JavaScript 编写中大型应用的时候可以应用工具来避免部分错误. Vue 很早就支持 TypeScript,但配置起来比较麻烦,幸好有了 Vue CLI 3.0.安装好 vue-cli 之后,使用 vue create 项目名称 来创建项目,vue 脚本手架自动创建以项目名称命名的目录. vue-cli 3 生成的项目结构比较科学,尤其是通过 components 和views 将作为控件的组件和作为页面的组件分离开来,

随机推荐