react-router-dom@5.3.0中Switch内Redirect配置无法渲染组件原因咨询

首先明确 react-router-dom v5 中 <Switch> 组件的核心运行规则：

<Switch> 会按照书写顺序从上到下依次匹配路径规则，只要命中第一条匹配成功的 <Route> 或 <Redirect>，就会停止匹配后续的所有规则，直接执行对应逻辑。

初始配置出错的原因 #

<Redirect> 组件默认是前缀模糊匹配：只要当前访问路径的前缀和 from 属性的值一致，就会命中规则。
你访问 /home/page1 时，路径前缀刚好是 /home，直接命中了写在最前面的 <Redirect from="/home" /> 规则，Switch 直接执行跳转逻辑，不会走到后面的 /home/page1 路由匹配，因此 Page1 组件无法渲染。

两种解决方案的原理 #

方案1：把 Redirect 配置放到 Route 规则之后 #

• 当你访问 /home/page1 时，Switch 从上到下匹配，第一条规则就是路径完全吻合的 /home/page1 Route，直接渲染 Page1 组件，不会走到后面的 Redirect 规则。
• 当你访问 /home 时，/home/page1 的 Route 匹配失败，Switch 继续往下走命中 Redirect 规则，触发跳转逻辑跳转到 /home/page1，完全符合需求。

方案2：给 Redirect 添加 exact 属性 #

exact 属性的作用是开启精确匹配：只有当前访问路径和 from 属性的值完全相等时，才会触发 Redirect 规则。

• 当你访问 /home/page1 时，路径和 /home 不完全相等，不会命中 Redirect 规则，Switch 继续往下匹配到 /home/page1 的 Route，正常渲染 Page1 组件。
• 当你访问 /home 时，路径完全匹配 Redirect 的 from 规则，触发跳转逻辑跳转到 /home/page1，符合需求。

内容的提问来源于stack exchange，提问作者user6592719