DEV Community
·
React Router中问号的力量：一个小符号引发的大问题
💡
原文英文，约300词，阅读约需1分钟。
📝
内容提要
我花了几个小时解决Doctors.jsx页面无法按专业筛选医生的问题，发现路由定义中缺少可选参数“？”。正确的路由应为<Route path="/doctors/:specialty?" element={<Doctors />} />，这样访问/doctors时会显示所有医生。调试路由时要注意可选参数。
🎯
关键要点
- 在Doctors.jsx页面中，无法按专业筛选医生的问题是由于路由定义中缺少可选参数“？”导致的。
- 正确的路由定义应为<Route path="/doctors/:specialty?" element={<Doctors />} />，这样访问/doctors时会显示所有医生。
- 缺少“？”使得路由期望有专业参数，因此访问/doctors时无法匹配路由。
- 可选参数使得路由能够根据不同的URL显示不同的内容。
- 学习到的教训是：没有“？”的路由在缺少动态部分时不会匹配。
- React Router在仅参数变化时不会重新挂载组件，因此组件必须使用useEffect()监听变化。
- 在构建过滤器、标签或动态内容页面时，始终仔细检查路由定义中的可选参数。
❓
延伸问答
为什么Doctors.jsx页面无法按专业筛选医生？
因为路由定义中缺少可选参数“？”导致的。
正确的路由定义应该是什么？
正确的路由应为<Route path="/doctors/:specialty?" element={<Doctors />} />。
缺少“？”会有什么影响？
缺少“？”使得路由期望有专业参数，访问/doctors时无法匹配路由。
如何确保路由能够根据不同URL显示不同内容？
需要在路由定义中使用可选参数，以便根据URL变化显示不同内容。
React Router在参数变化时会有什么表现？
React Router在仅参数变化时不会重新挂载组件，组件必须使用useEffect()监听变化。
在构建动态内容页面时需要注意什么？
始终仔细检查路由定义中的可选参数。
➡️
