-
动态路由参数
params: 当路由路径包含动态部分时,可以捕获这部分作为参数。 useParams: Hook 用于访问路由参数。
-
路由位置
location: 表示当前 URL 的信息,包括 pathname、search、hash 等。 useLocation: Hook 用于获取当前的 location 对象。
-
导航行为
useNavigate: Hook 用于程序化地导航到新的 URL。 useNavigation: Hook 提供有关当前导航状态的信息。
-
导航守卫
useBeforeUnload: Hook 用于执行在页面卸载前的操作,如确认用户是否要离开当前页面。
-
嵌套路由
Nested Routes: 在 Route 中嵌套更多的 Route,以创建复杂的路由结构。
-
受保护的路由
Protected Routes: 通常用于根据用户身份验证状态来控制路由的访问权限。
-
路由匹配
exact: 标志用于确保路由仅在其路径与 URL 完全匹配时才渲染。
path: 用于定义路由匹配的路径。
-
404 页面
通配符路由 (*): 用于定义所有未匹配的 URL 的默认路由,通常用于 404 错误页面。
-
路由上下文
useContext: 可以用来访问路由相关的上下文,如 location、navigate 等。
-
路由懒加载
React.lazy: 可以与 react-router-dom 结合使用,以实现路由组件的懒加载。
-
历史对象
history: 用于访问和修改浏览器的历史记录,包括 push、replace、go 等方法。
-
路由生命周期
useEffect: 可以用来监听路由变化并执行某些操作,如数据加载等。
-
路由数据传递
props: Route 组件可以传递 props 到其渲染的组件。
useRouteMatch: Hook 用于访问当前匹配的路由信息。
-
路由重定向
Redirect: 用于配置永久或临时的重定向规则。
-
国际化路由
IntlRoute: 虽然不是 react-router-dom 的一部分,但可以使用类似组件来支持国际化路由。
-
高级主题
动态加载组件: 使用 React.lazy 和 Suspense 以按需加载组件。 服务器端渲染 (SSR): 支持服务器端渲染,需要使用 react-router-dom/server。
-
其他实用工具
withRouter: HOC (Higher Order Component) 用于将非 Route 组件连接到路由系统。 matchPath: 函数用于手动匹配路径。