在 React Router 中,有以下几种常见的路由模型:
1. HashRouter:使用 URL 中的哈希(#)来管理路由,适用于不支持 HTML5 History API 的环境。例如:`http://example.com/#/route`
2. BrowserRouter:使用 HTML5 History API 来管理路由,不包含哈希,适用于现代浏览器环境。例如:`http://example.com/route`
3. MemoryRouter:在内存中管理路由,不会改变 URL。适用于非浏览器环境,如 React Native。
4. StaticRouter:用于服务器端渲染(SSR),根据请求的 URL 来匹配路由,并将匹配的组件渲染为静态 HTML。
除了不同的路由容器(Router)之外,React Router 还提供了以下路由组件和模型:
- Route:用于声明路由的匹配规则,可以根据 URL 匹配到对应的组件进行渲染。
- Switch:用于包裹一组 Route 组件,只渲染第一个匹配到的 Route 组件。
- Link:用于生成导航链接,点击链接时会导航到对应的路由。
- NavLink:类似于 Link,但可以根据当前路由的匹配状态为链接添加样式。
- Redirect:用于在路由切换时重定向到指定的路由。
- withRouter:高阶组件,用于将路由信息(如 location、match 等)注入到组件的 props 中。
这些组件和模型一起提供了一套强大的路由管理工具,用于在 React 应用中处理页面导航和路由匹配。通过选择适合项目需求的路由模型和组件,可以实现灵活、可扩展的路由功能。