在 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:在內存中管理路由,不會改變 URL。適用于非瀏覽器環(huán)境,如 React Native。
4. StaticRouter:用于服務器端渲染(SSR),根據(jù)請求的 URL 來匹配路由,并將匹配的組件渲染為靜態(tài) HTML。
除了不同的路由容器(Router)之外,React Router 還提供了以下路由組件和模型:
- Route:用于聲明路由的匹配規(guī)則,可以根據(jù) URL 匹配到對應的組件進行渲染。
- Switch:用于包裹一組 Route 組件,只渲染第一個匹配到的 Route 組件。
- Link:用于生成導航鏈接,點擊鏈接時會導航到對應的路由。
- NavLink:類似于 Link,但可以根據(jù)當前路由的匹配狀態(tài)為鏈接添加樣式。
- Redirect:用于在路由切換時重定向到指定的路由。
- withRouter:高階組件,用于將路由信息(如 location、match 等)注入到組件的 props 中。
這些組件和模型一起提供了一套強大的路由管理工具,用于在 React 應用中處理頁面導航和路由匹配。通過選擇適合項目需求的路由模型和組件,可以實現(xiàn)靈活、可擴展的路由功能。