react-router 4.0 如何匹配可选参数

最新推荐文章于 2025-06-26 17:41:42 发布

原创最新推荐文章于 2025-06-26 17:41:42 发布 · 8.7k 阅读

4 ·

CC 4.0 BY-SA版权

前端学习专栏收录该内容

4 篇文章

订阅专栏

本文介绍在React不同版本中路由可选参数的变化。从react-router2.0到4.0, 可选参数的书写方式发生了变化，从<Routepath='/index(/:hello)'/>变成了<Routepath='/index/:hello?'/>，后者通过在参数后加问号来表示参数可选。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在react-router 2.0中可选参数是这样写的

<Route path='/index(/:hello)' />

而在react-4.0中你会惊喜的发现这种写法没用了，今天采坑碰到纪律一下

要写成这样

<Route path='/index/:hello?' />

后边的问号表示这个参数是可选的

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端渣渣郭

关注关注

3
点赞
踩
4

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

react-router简单整理总结

LYFlied的博客

04-29

794

文章目录一、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实战项目从0到1搭建（仅供参考）

最新发布

m0_68716504的博客

06-26

311

路由系统中的多个路由之间需要进行路由跳转，并且在跳转的同时有可能需要传递参数进行通信。

关于react-router4中路由的配置,传参,跳转,可选参数写法

weixin_34248705的博客

08-12

734

为什么80%的码农都做不了架构师？>>> ...

React react-router 4.0 路径添加可选参数、获取history信息实现JS跳转

蜗牛速度额的博客

01-01

2466

4.0 中参数后面加问号，表示可选参数： import { HashRouter, Route, Switch } from 'react-router-dom'; class App extends Component { constructor() { super(); } render() { return ( <HashRouter&g...

React Router参数传递

weixin_30537391的博客

05-30

210

React Router参数传递从Header中跳转到list传递数值。利用在root.js中设置中path="list/id:"。这个为定义的方法在list中用{this.props.params.id}获取从Header路由传递过来的值 Header中使用转载于:https://www.cnblogs.com/ArielChen/p/7467617.html...

react-router中<Link/>的属性详解

08-30

在React Router库中，`<Link>`组件是一个关键部分，用于在应用内创建导航链接。它使得用户在不刷新整个页面的情况下，能够平滑地在不同的路由之间切换。以下是关于`<Link>`组件的一些详细属性及其说明： 1. **to**:...

m0_59529616的博客

08-03

1096

★★★ React 事件绑定原理 ★★★ React中的 setState 缺点是什么呢 ★★★ React组件通信如何实现 ★★★ 类组件和函数组件的区别 ★★★ 请你说说React的路由是什么？ ★★★★★ React有哪些性能优化的手段？ ★★★★ React hooks 用过吗，为什么要用？ ★★★★ 虚拟DOM的优劣如何？实现原理？ ★★★★ React 和 Vue 的 diff 时间复杂度从 O(n^3) 优化到 O(n) ，那么 O(n^3) 和 O(n) 是如何计算出来的？

React全家桶+AntD共享单车-后台管理系统开发-笔记-01

mysteryflower的专栏

04-19

1135

第一章课程导学对课程整体进行介绍，并且说明学习的必要性。 1-1 导学产品需求 1、技术选型 2、项目架构 3、项目规范 4、封装项目公共机制 5、提高开发效率课程概述 React全家桶 React基础知识、生命周期 Router4.0语法讲解 Redux集成开发 AntD UI组件最实用集成组件 AntD栅格系统 Etable组件封装 BaseForm组...

react-router的params/search/state传参方式(对比React-Router4/5/6)

qq_44472790的博客

08-31

1707

react日常开发总结

React路由匹配的问题

biaov

07-17

3046

最近在写 React 项目时，被 React 路由匹配的问题折磨的够呛，这里来分享一下其中的一些坑，以及我的路由配置组件。前提安装路由 npm i react-router-dom -S 用 react-router-dom 不用 react-router 的原因： react-router-dom多出<Link> <BrowserRouter>等组件。更适合，更好用，更简单（没有这些组件就需要你自己去封装）。配置 history 模式如果使用 hash.

react-router 的路由匹配逻辑

u013235949的博客

06-13

2236

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

vue-router关于params传参问题

qq_45142260的博客

01-29

486

路由跳转通过params实现页面之间的传参，参数可选。

react使用antd实现可输可选的功能

白小白的博客

01-04

544

单选的可输可选 const options = [ { value: "容易", text: "容易" }, { value: "困难", text: "困难" }, { value: "顺利", text: "顺利" }, ] <AutoComplete allowClear options={options} style={{ width: "96%" }} value={bindData.pos

react-router 4.0 笔记 - 可选查询参数

shenqingling的博客

09-28

799

react-router2 () &amp;amp;amp;amp;amp;lt;Route path=&amp;amp;amp;amp;quot;/topic(/:topicId)&amp;amp;amp;amp;quot; component={TopicDetailPage} /&amp;amp;amp;amp;amp;gt; react-router4 用 ? 替代 &amp;amp;amp;amp;amp;lt;Ro

react-router 路由匹配

onegoldensun的博客

07-28

3054

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有关精确匹配，重定向的两种方法

weixin_43882065的博客

02-27

2750

写的路由如果有加 exact 就表示精确匹配，例如：精确匹配下的 ‘/’ 加后缀是匹配不到的，只能有访问 ’/‘才能跳转一般情况下首页是需要精确匹配的。 <Route path = '/' exact component={Index} /> 重定向的两种方法，引入Redirect 后 return ( 第二种，在 constructor 里面写 this.props...