為什么在React Router 4.3中嵌套子路由無法生效？如何解決這個(gè)問題？

React router 4.3嵌套路由失效及解決方案

在使用React Router 4.3構(gòu)建嵌套路由時(shí)，常常遇到子路由無法正常工作的難題。本文將通過一個(gè)案例分析，并提供有效的解決方法。

問題描述：

用戶在/course/coursedetails頁面添加了tab菜單，期望點(diǎn)擊菜單切換不同內(nèi)容。訪問/course/coursedetails正常，但切換到/course/coursedetails/coursecatalog時(shí)，出現(xiàn)404錯(cuò)誤。用戶已移除父、子路由的exact屬性，但父組件仍未響應(yīng)路由變化。

代碼示例：

app.JS (路由配置):

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

coursedetails.js (子路由配置):

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

問題分析與解決：

問題根源在于React Router 4.3的路由匹配機(jī)制。當(dāng)父路由設(shè)置了exact屬性時(shí)，即使子路由路徑與之匹配，父路由也會(huì)優(yōu)先匹配，導(dǎo)致子路由無法生效。 即使去除了exact屬性，如果路由定義順序不當(dāng)，也可能導(dǎo)致問題。

解決方案：

1. 移除父路由的exact屬性 (如果存在): 確保父路由(/course)的組件沒有exact屬性。這允許父路由匹配更長(zhǎng)的路徑，從而使子路由能夠正常工作。

2. 調(diào)整路由定義順序: 確保子路由的定義在父路由之后。React Router會(huì)按照定義順序進(jìn)行匹配。

修改后的代碼示例：

app.js: (無需修改，因?yàn)槭纠幸褵oexact屬性)

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

coursedetails.js: (無需修改，如果子路由定義在父路由之后)

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

如果問題仍然存在，請(qǐng)檢查以下幾點(diǎn)：

• 路徑是否正確: 仔細(xì)檢查路由路徑的拼寫和大小寫。
• 組件導(dǎo)入: 確保正確導(dǎo)入了Course, CourseDetails, CourseCatalog組件。
• switch組件: 如果使用了組件，請(qǐng)確保子路由在父路由之后定義。只匹配第一個(gè)匹配到的路由。

通過以上調(diào)整，/course/coursedetails/coursecatalog路徑應(yīng)該能夠正常工作，避免404錯(cuò)誤。 如果問題仍然存在，請(qǐng)?zhí)峁┩暾拇a片段以便進(jìn)行更詳細(xì)的分析。