在 React Router 中,有以下幾種常見的路由模型:
1. HashRouter:使用 URL 中的哈希(#)來管理路由,適用于不支持 HTML5 History API 的環(huán)境。例如:`http://example.com/#/route`
2. BrowserRouter:使用 HTML5 History API 來管理路由,不包含哈希,適用于現(xiàn)代瀏覽器環(huán)境。例如:`http://example.com/route`
3. MemoryRouter:在內(nèi)存中管理路由,不會(huì)改變 URL。適用于非瀏覽器環(huán)境,如 React Native。
4. StaticRouter:用于服務(wù)器端渲染(SSR),根據(jù)請求的 URL 來匹配路由,并將匹配的組件渲染為靜態(tài) HTML。
除了不同的路由容器(Router)之外,React Router 還提供了以下路由組件和模型:
- Route:用于聲明路由的匹配規(guī)則,可以根據(jù) URL 匹配到對應(yīng)的組件進(jìn)行渲染。
- Switch:用于包裹一組 Route 組件,只渲染第一個(gè)匹配到的 Route 組件。
- Link:用于生成導(dǎo)航鏈接,點(diǎn)擊鏈接時(shí)會(huì)導(dǎo)航到對應(yīng)的路由。
- NavLink:類似于 Link,但可以根據(jù)當(dāng)前路由的匹配狀態(tài)為鏈接添加樣式。
- Redirect:用于在路由切換時(shí)重定向到指定的路由。
- withRouter:高階組件,用于將路由信息(如 location、match 等)注入到組件的 props 中。
這些組件和模型一起提供了一套強(qiáng)大的路由管理工具,用于在 React 應(yīng)用中處理頁面導(dǎo)航和路由匹配。通過選擇適合項(xiàng)目需求的路由模型和組件,可以實(shí)現(xiàn)靈活、可擴(kuò)展的路由功能。