react学习笔记6 路由(二)

200 阅读2分钟
  1. 动态路由参数

    params: 当路由路径包含动态部分时,可以捕获这部分作为参数。 useParams: Hook 用于访问路由参数。

  2. 路由位置

    location: 表示当前 URL 的信息,包括 pathname、search、hash 等。 useLocation: Hook 用于获取当前的 location 对象。

  3. 导航行为

    useNavigate: Hook 用于程序化地导航到新的 URL。 useNavigation: Hook 提供有关当前导航状态的信息。

  4. 导航守卫

    useBeforeUnload: Hook 用于执行在页面卸载前的操作,如确认用户是否要离开当前页面。

  5. 嵌套路由

    Nested Routes: 在 Route 中嵌套更多的 Route,以创建复杂的路由结构。

  6. 受保护的路由

    Protected Routes: 通常用于根据用户身份验证状态来控制路由的访问权限。

  7. 路由匹配

    exact: 标志用于确保路由仅在其路径与 URL 完全匹配时才渲染。

    path: 用于定义路由匹配的路径。

  8. 404 页面

    通配符路由 (*): 用于定义所有未匹配的 URL 的默认路由,通常用于 404 错误页面。

  9. 路由上下文

    useContext: 可以用来访问路由相关的上下文,如 location、navigate 等。

  10. 路由懒加载

    React.lazy: 可以与 react-router-dom 结合使用,以实现路由组件的懒加载。

  11. 历史对象

    history: 用于访问和修改浏览器的历史记录,包括 push、replace、go 等方法。

  12. 路由生命周期

    useEffect: 可以用来监听路由变化并执行某些操作,如数据加载等。

  13. 路由数据传递

    props: Route 组件可以传递 props 到其渲染的组件。

    useRouteMatch: Hook 用于访问当前匹配的路由信息。

  14. 路由重定向

    Redirect: 用于配置永久或临时的重定向规则。

  15. 国际化路由

    IntlRoute: 虽然不是 react-router-dom 的一部分,但可以使用类似组件来支持国际化路由。

  16. 高级主题

    动态加载组件: 使用 React.lazy 和 Suspense 以按需加载组件。 服务器端渲染 (SSR): 支持服务器端渲染,需要使用 react-router-dom/server。

  17. 其他实用工具

    withRouter: HOC (Higher Order Component) 用于将非 Route 组件连接到路由系统。 matchPath: 函数用于手动匹配路径。