為什么在使用 React-Router 4.3 時，嵌套子路由不生效？如何解決這個問題？

React router 4.3 嵌套路由失效排查指南

在使用 React Router v4.3 時，嵌套路由有時會失效，本文將分析常見原因及解決方法。

問題場景

假設您有一個 /course/coursedetails 頁面，包含一個用于切換不同 Tab 內容的菜單。訪問 /course/coursedetails 沒有問題，但點擊菜單切換到 /course/coursedetails/coursecatalog 時，卻出現 404 錯誤。即使已移除父路由的 exact 屬性，問題依然存在。

以下是一個示例代碼片段：

app.JS (路由配置)

<Route path="/course" component={Course} />

coursedetails.js (嵌套路由)

<switch>   <Route path="/course/coursedetails" component={CourseDetails} />   <Route path="/course/coursedetails/coursecatalog" component={CourseCatalog} /> </Switch>

解決方案

問題根源在于路由匹配的相對路徑和 Switch 組件的特性。Switch 組件只匹配第一個符合條件的路由。 如果父路由 /course/coursedetails 匹配成功，Switch 組件便不會再向下匹配子路由 /course/coursedetails/coursecatalog。

正確的配置方法：

1. 調整路由路徑： 父路由和子路由的路徑需要相對正確。父路由路徑應該更通用，子路由路徑應該相對于父路由。

2. 避免在父路由中使用 exact 屬性： exact 屬性會強制精確匹配路徑，阻止子路由匹配。

3. 使用 Route 而不是 Switch (如果不需要精確匹配): 如果不需要精確匹配第一個路由，可以直接使用 組件，而無需使用 。

修改后的代碼:

app.js (保持不變)

<Route path="/course" component={Course} />

coursedetails.js (修改后的嵌套路由)

<Route path="/course/coursedetails" component={CourseDetails}>   <Route path="/coursecatalog" component={CourseCatalog} /> </Route>

或者，如果 CourseDetails 組件需要渲染在 /course/coursedetails 路徑下：

<Switch>   <Route path="/course/coursedetails" render={() => (     <CourseDetails>       <Route path="/coursecatalog" component={CourseCatalog} />     </CourseDetails>   )} /> </Switch>

通過以上調整，確保父路由能夠正確地渲染并包含子路由，從而解決嵌套路由失效的問題。 記住，路徑的定義至關重要，確保它們能夠正確地嵌套和匹配。 如果仍然遇到問題，請檢查您的路由配置是否與組件的路徑相匹配。