react-router有关精确匹配，重定向的两种方法

最新推荐文章于 2024-06-13 14:54:09 发布

weixin_43882065

最新推荐文章于 2024-06-13 14:54:09 发布

阅读量2.7k

点赞数

分类专栏： react 前端文章标签： reactjs

本文链接：https://blog.csdn.net/weixin_43882065/article/details/104537075

版权

react 同时被 2 个专栏收录

9 篇文章

订阅专栏

前端

9 篇文章

订阅专栏

写的路由如果有加 exact 就表示精确匹配，
例如：精确匹配下的 ‘/’ 加后缀是匹配不到的，只能有访问 ’/‘才能跳转
一般情况下首页是需要精确匹配的。

 <Route path = '/' exact component={Index} />

重定向的两种方法，引入Redirect 后
return (

第二种，在 constructor 里面写
this.props.history.push("/xxx")

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_43882065

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

react-router模糊与精确匹配

逆风飞翔的代码狗

07-13

1461

模糊与精确匹配模糊匹配在前面的基础之上，将App.js稍微修改： App.js export default class App extends Component { render() { return ( <Router> <Link to="/home/a">Home</Link>--- <Link to="/about">About</Link> <br /

react 路由跳转 / react-router-dom 使用

北芒的博客

07-16

2578

react 核心包 react-router 核心组件 react-router-dom 应用于浏览器端的路由库（） react-router-native react-router-config

参与评论您还未登录，请先登录后发表或查看评论

react中的路由----匹配模式（精确匹配）

imkaifan的博客

09-20

2291

问题：下面的代码会导致，Home页面一直在页面中。原因： 1、Home页面是默认路由，一进入页面就可以看到home页面 2、默认路由是模糊匹配，当点击“登陆页面”的时候，会进行模糊匹配，home页面依然会匹配到 import React from "react"; import ReactDOM from "react-dom"; import { BrowserRouter as Router, Route, Link } from "react-router-dom"; // 匹配模式精确匹配

react-router 路由匹配

onegoldensun的博客

07-28

3043

URL 类型 http://localhost:8080/#/listrepo?name=555&id=66666 值存在this.props.location.query中 url类型 http://localhost:8080/#/listrepo/555/66666 值存在this.props.params中

React Router 中的 exact 属性

forever__fish的博客

11-08

1327

如果版本在 v6，就不需要关注 exact 属性啦。

react入门之旅7——Route之匹配规则&Switch&Redirect

qq_41470573的博客

07-08

1024

匹配规则 <NavLink to="/home">Home</NavLink> <Route path="/home" component={Home}/> 创建链接时，to属性给的是"/home"；路由的path属性给的同样也是"/home"，是一模一样的，这明显是采用的精准匹配。但react-router-dom采用的匹配规则并不是精准匹配，而是模糊匹配，但该模糊匹配并非简单看to字符串是否包含path中的字符串。首先，得明确一点，to和path中给的并非简

react-router简单整理总结

LYFlied的博客

04-29

759

文章目录一、react-router与react-router-dom区别二、React-router1.路由组件 BrowserRouter 和 HashRouter2.路径匹配组件: Route 和 Switch2.1Route2.2Switch2.3导航组件: Link 和 NavLink2.4 Redirect2.5 withRouter2.3编程式导航 - history 对象一、react-router与react-router-dom区别 react-router: 实现了路由的核心功能

从零手写react-router

helloworld1024fd的博客

10-19

280

至于帮助我们实现了什么东西我就不过多阐述了, 这个直接移步官方文档, 我们下面直接聊实现另外: 源码有依赖两个库和, 所以我这里也就直接引入这两个库了,虽然下面我都会讲到基本使用, 但是同学有时间的话还是可以阅读以下官方文档还有一个需要注意的点是: 下面我书写的原理都是使用 + 函数组件来书写的, 而官方是使用类组件书写的, 所以如果你对还不是很明白的话, 得去补一下这方面的知识, 为什么要选择, 因为现在绝大多数大厂在上基本都在大力推荐使用, 所以我们得跟上时代不是, 而且我着重和大家聊的也是原理, 而不

从零开始实现一个react-router-dom插件

weixin_41430403的博客

02-01

429

一、回顾一下官方react-router-dom的使用要想自己实现一个react-router-dom，就必须先了解一下react-router-dom的基本使用，react-router-dom与vue-router有点不同，react-router-dom采用的是去中心化路由，所以其不需要写一个单独的router.js来集中配置和管理路由，如: ①引入react-router-do...

react进阶（二）——react-router基本使用和匹配规则

qq_40566547的博客

06-16

3239

react-router的安装在项目根目录运行命令 npm install react-router-dom / yarn add react-router-dom 初始化自己的项目删去初始项目src所有的文件，还原一个干净的src 在src目录下新建index.js（必须有的一个文件，因为他是入口文件）和App文件，代码部分如下： index.js代码 import React f...

严格匹配和Redirect和Replace

weixin_43613849的博客

11-01

436

1、严格匹配 1、react默认是模糊匹配什么是模糊匹配，我们来看下面两个小例子 2、怎么开启严格匹配添加exact或者exact={true} 1.默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致） 2.开启严格匹配：<Route exact={true} path="/about" component={About}/> 3.严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由 2、Redirect .

React 路由精准匹配

qq_47243637的博客

04-13

422

【代码】React 路由精准匹配和模糊匹配。

react路由的匹配模式(模糊匹配、精确匹配)

m0_45877477的博客

07-30

2809

react路由默认情况下使用的是模糊匹配模糊匹配规则: 只要pathname(link的to属性/地址栏url的pathname)是以的path属性的值开头,就能匹配成功

react 404 和 重定向

姚辉乾

08-11

839

cnpm i react-router-dom -S import React from 'react'; import Home from './component/home/index.jsx'; import New from './component/home/new.jsx'; import User from './component/home/user.jsx'; import { BrowserRouter } from 'react-router-dom' fu.

react-router 的路由匹配逻辑

最新发布

u013235949的博客

06-13

2138

本文针对的是 react-router v6在使用 react-router 的时候遇到了一个问题, 出于好奇写下了此文.当路径是 / 的时候, 页面会展示当路径是 /about 的时候, 页面会展示那么从直觉上来说, 当路径是一个任意匹配不到的路径时, 比如 /nothing 时, 页面至少应该展示Layout, 然后在Layout的出口处展示404页.但是实际的情况是整个页面都是一个404页.那 react-router 的内部匹配逻辑到底是什么样的呢?

使用react-router进行多级路由匹配

zem

10-09

5975

在React-router学习笔记 react-router基本使用中，我做了精确的路由匹配，但是实际上，我们在进行路由匹配的时候，一般是会进行多级路由的匹配，所以这里说说如何进行多级路由的匹配在使用react-router-dom的Link的时候，我们需要使用to来指定路由，而Route用来显示路由对应得内容，默认情况下，Route 会进行路由的模糊匹配 <Route path="/to...

vue-router的模糊匹配和精确匹配

qq_40816649的博客

11-24

8888

场景：最近在做的这个项目有一个场景是个人中心页面，有几个嵌套的二级路由，其中有一个订单的子路由下面还嵌套着几个三级路由。这里二级路由是通过点击router-link进行点击跳转，三级路由是通过二级路由中的查看详情等按钮进入的。问题就在这里当跳转到三级路由的时候对应的二级路由的router-llink如何保持激活样式。 router.js文件中的三极路由的path属性中要写入二级路由的path属性...

react-router-dom的路径匹配属性exact 与strict

xiongshiyuan的博客

02-19

9651

在这里先介绍一个比较难以描述的坑在使用react-router的时候我首先就是先在react-router的官网上去看她的官方文档，然后按照上面的教程来在自己的react工程中使用react-router，但是基本应该会遇到问题，原因就是我们在使用npm安装react-router的时候基本是4.x版本，由于版本的问题有一些我们之前在其他人的项目中看见的一些属性没法使用，其实是由于官网上的教程...

React Router 实例应用与开发指南

v4之前的版本提供了react-router和react-router-redux两个包，其中react-router负责基本的路由功能，而react-router-redux用于路由状态的同步。从v4版本开始，库被重构为一个更为扁平化的结构，将路由功能和状态同步...