React Router 中的 exact 属性

news/2024/12/12 20:56:17/

在看 React 示例时,发现在配置路由时很多都用到了 exact 属性,然后就研究了一下。

在 React Router 中,exact 是一个布尔属性,用于确保路由路径的精确匹配。

示例

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';const App = () => {return (<Router><Switch><Route exact path="/" component={Home} /><Route path="/about" component={About} /></Switch></Router>);
};export default App;

上述示例中,在第一条路由中用到了 exact,表示精准匹配,如果不写的话,那么在匹配路由 “/about” 时,会匹配到路由 “/”,这样就会造成组件匹配错误。

尝试

然后我就在我的 React 项目中试了一下,没有出现上述的问题,添加或删掉 exact 对我的项目没有任何影响,查阅了一些资料才发现是 React Router 版本的问题:

在 React Router 版本 5 及之前的版本中,需要关注这个属性,因为它的默认行为为 false,如果没有显示的设置为 true,路由将会进行模糊匹配,即只要路径部分匹配,就会渲染对应的组件。但是在 React Route 版本 6 中,exact 属性已被移除,路由的默认行为改为了精准匹配,只有在当路径与 URL 完全匹配时才会渲染组件。

总结

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


http://www.ppmy.cn/news/1212083.html

相关文章

Python中如何判断两个对象的内存地址是否一致?

目录 一、引言 二、Python的内存管理 三、对象的比较 四、使用id函数判断内存地址 五、总结 一、引言 在Python中&#xff0c;我们经常需要比较两个对象是否是同一个对象&#xff0c;或者说它们是否在内存中占据同一位置。在理解这个问题之前&#xff0c;我们需要了解Pyt…

Vatee万腾科技决策力的未来展望:开创数字化创新的新高度

随着科技不断演进&#xff0c;Vatee万腾的科技决策力在数字化创新领域展现出了强大的潜力和前瞻性。 Vatee万腾的科技决策力被视为数字化创新的引擎&#xff0c;为未来创新注入了新的动力。通过深刻的市场洞察和科学决策&#xff0c;Vatee万腾致力于推动数字化创新走向新的高度…

desc相关注入

desc相关注入 补充

Python开源项目PGDiff——人脸重建(Face Restoration),模糊清晰、划痕修复及黑白上色的实践

python ansconda 等的下载、安装等请参阅&#xff1a; Python开源项目CodeFormer——人脸重建&#xff08;Face Restoration&#xff09;&#xff0c;模糊清晰、划痕修复及黑白上色的实践https://blog.csdn.net/beijinghorn/article/details/134334021 友情提示&#xff1a; …

LD_PRELOAD的资料

日常工作中&#xff0c;经常使用LD_LIBRARY_PATH来指定应用程序依赖动态库的位置&#xff0c;很少有机会直接使用LD_PRELOAD。 近期参与现有的项目时&#xff0c;听说版本的临时补丁使用LD_PRELOAD相关的技术实现。 收集一些资料&#xff0c;了解基本的使用方法。 只可惜看不到…

CHM Viewer Star 6.3.2(CHM文件阅读)

CHM Viewer Star 是一款适用于 Mac 平台的 CHM 文件阅读器软件&#xff0c;支持本地和远程 CHM 文件的打开和查看。它提供了直观易用的界面设计&#xff0c;支持多种浏览模式&#xff0c;如书籍模式、缩略图模式和文本模式等&#xff0c;并提供了丰富的功能和工具&#xff0c;如…

3164:练27.1 叮叮当当 《信息学奥赛一本通编程启蒙(C++版)》

3164&#xff1a;练27.1 叮叮当当 《信息学奥赛一本通编程启蒙&#xff08;C版&#xff09;》 【题目描述】 松鼠老师和尼克玩报数游戏。松鼠老师数到2的倍数时&#xff0c;尼克就说“叮叮”&#xff1b;松鼠老师数到3的倍数时&#xff0c;尼克就说“当当”&#xff1b;松鼠老…

AGV 线路维护模块Pytorn

# ファイル: delete.py # 作成者: 藤井広輝 # 更新日: 2023/7/25 # 説明: データベースから経路情報を削除するウィンドウプログラム # 必要なライブラリをインポート import tkinter as tk from tkinter import messagebox import mysql.connector # 必要な自作ライブラ…