react技术全家桶（43）路由的模糊匹配与严格匹配以及Redirect的使用以及嵌套（多级）路由

最新推荐文章于 2024-04-04 20:05:51 发布
最新推荐文章于 2024-04-04 20:05:51 发布
阅读量338 收藏
点赞数 1
文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41380194/article/details/125285063
版权

模糊匹配：
About
Home

上述可以正常使用。

这种写法是不可以的：
About
Home

精准匹配：
About
Home

因为开启了精准匹配，所以/home/a/b 就无法匹配到组件

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

Redirect的使用
import {Redirect } from react-router-dom;

如果路径 /about /home 都没有匹配上 那就重定向到/about

嵌套（多级）路由
news是home的子路由
News
注册路由：


逻辑是这样的：点击news导航 地址栏变为/home/news 开始匹配路由: 因为是非严格模式 所以/home/news 可以匹配到home组件，这时候挂载home组件，home组件挂载后 又有新路由注册， 继续匹配/home/news 就找到了news组件 然后挂载news组件

如果/home开启严格匹配 那么就不会正常跳转到news组件了 而是重定向了默认组件。

没有女朋友的程序员
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React:router Redirect
BLUEsang的博客
07-10 665
Redirect import {Route, NavLink, Switch, Redirect} from 'react-router-dom'; 任何以’/‘为前缀的url，都会重定位到’/posts/ <Redirect from='/' to='/posts'/> Conditional Redirect 将< Redirect /> 放入return中，即会跳转页面； 所以需要用let变量存放< Redirct />
React-Router实战：重定向Redirect
热门推荐
若水弹丸之地
03-23 7万+
当用户访问某界面时，该界面并不存在，此时用Redirect重定向，重新跳到一个我们自定义的组件里。 一、基础 1、引入使用 // 如果loggedIn 为 false, 则重定向跳转到 /home 页面 import { Route, Redirect } from 'react-router' <Route exact path="/" render={() => ( ...
React 中嵌套路由
weixin_45677987的博客
07-12 331
1： React 中嵌套路由: class App extends Component { render() { return ( <div className="container"> <div className="jumbotron-fluid" py-4 mt-4> <Header a={1}> </div> <div classN.
React - 路由 Redirect 的使用（路由重定向）
技术共享，共同进步！
09-02 911
React - 路由 Redirect 的使用（路由重定向）
react-router@4.2.0系列-Redirect组件
u010565037的博客
03-21 865
Redirect组件 开发中遇到的需求，ajax请求返回状态如果成功则跳转成功页面（很常见吧）。由于是单页应用，跳转前后用Route组件渲染，跳转用Redirect进行控制。测试demo结构如下： 测试结构 其中index.html，server.js和wepack.config.dev.js是我在写webpack热更新所用来编译项目的文件，大家可以用自己方式。 index.js ...
react-navigation v5x版本 路由嵌套以及不同层路由间的传参
01-08
见官网，传送门不谢react-navigation路由嵌套 路由传参 ： 正常的传参见官网，传送门不谢react-navigation路由传参 正题，路由跨层传参，解锁隐藏技能。 情景：例如页面PA使用了stack、bottomNav或者topNav路由导向...
react-router4 嵌套路由的使用方法
08-29
以下是对`react-router4`嵌套路由的详细解释和使用方法。 首先，我们需要引入必要的库，包括`react-router-dom`，它是`react-router`的DOM绑定库，以及`history`库，用于创建浏览器历史记录对象： ```jsx import ...
react-router-dom 嵌套路由的实现
10-15
本文将详细讲解如何使用`react-router-dom`实现嵌套路由。 首先，我们需要安装`react-router-dom`库，可以通过npm或yarn进行安装： ```bash npm install react-router-dom # 或 yarn add react-router-dom ``` **...
详解前端路由实现与react-router使用姿势
08-29
详解前端路由实现与react-router使用姿势 前端路由是指在客户端实现的路由机制，用于控制页面之间的跳转和数据交换。在SPA（Single Page Application）开发中，前端路由扮演着至关重要的角色。React Router是目前最...
P04: ReactRouter路由重定向-Redirect使用
wgchen
12-16 1956
React Router阐述标签式重定向编程式重定向示例ReactRouterDemo\demo01\src\index.jsReactRouterDemo\demo01\src\AppRouter.jsReactRouterDemo\demo01\src\Pages\Index.jsReactRouterDemo\demo01\src\Pages\List.jsReactRouterDemo\demo01\src\Pages\Home.js 阐述 个人认为Redirect(重定向)，就掌握基本的两个知识点
react-router4.2使用js控制路由跳转的3种方式
02-12
react技术是目前流行UI开发框架，是facebook的开源的开发技术
react-router-dom之Redirect(重定向)理解
weixin_44874595的博客
02-11 6268
这段时间写个小项目，实战过程中，路由理解得一塌糊涂 其中有个业务逻辑是这样的: 我有个layout布局组件，想在其中显示我所定义的子路由，其中有个需求， 当我访问/home时，我想重定向到/home/page1，其中我的配置大概如下： <HashRouter> <Switch> <Route exact path="/" render={() => ...
六、【React-Router5】Redirect 重定向
天行健，君子以自强不息
11-29 767
六、【React-Router5】Redirect 重定向
react中路由重定向
imkaifan的博客
09-30 8260
react中路由重定向 react路由重定向官方文档说明 render 属性：是一个函数prop，用于指定要渲染的内容 Redirect 组件用于实现路由重定向，to 属性指定要跳转到的路由地址 <Route exact path="/home" component={Index} /> <Route exact path="/" render={() => <Redirect to="/home" />} /> 如下代码逻辑说明： 当进来到页面中是默认路由的
ReactRouter学习之旅三：Redirect重定向
muAluo的博客
11-14 1071
新建一个Home组件用于重定向： import React, { Component } from 'react'; //要求进入Index就重定向到Home class Home extends Component { constructor(props) { super(props); this.state = { } } render() { return ( <h2>我是Home组件-Redirect&lt
React router（V6以下）
m0_54476873的博客
11-13 578
react-router v5用法，嵌套路由，路由传参，动态路由，router hooks
vue项目开发---做一些开发前的配置，学习网页web前端开发
最新发布
2401_84097658的博客
04-04 601
分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可免费下载容对你有帮助，可以扫码获取！！（备注：前端）**分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可免费下载。
react router 路由守卫
qq_42975676的博客
05-13 281
import ｛Route，Redirect｝from “react-router-dom” const PrivateRoute = ({component:Component, ...rest}) =>( <Route {...rest} render={props=>{ return isLogin ? <Component {...props}> : <Redirect
react-router深入浅出
qq_43955202的博客
09-15 310
1.改变页面路由的两种方式 监听hash的改变 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <bo
React全家桶2：集成Redux实现路由守卫
在React全家桶2的学习中，主要关注两个核心知识点：react-router的使用和Redux的整合，以实现更高级的路由控制逻辑。首先，我们将深入探讨react-router的各个方面。 **react-router** 1. **安装**： react-router...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值