DeepLinks and ScrollAnchor

Deep links are hyperlinks that direct users to specific content within a website rather than the homepage. In Cloudflare's Dashboard, deep linking is used to enhance user experiences by enabling direct navigation to new or changed features and providing clearer troubleshooting directions. The challenge with deep linking in the Dashboard is that most interesting resources are locked behind an account and zone context. To address this, a solution was developed involving three main parts: dynamic value resolution in deep links URLs, a React component for routing and resolving deep links (DeepLink), and another React component for scrolling to specific content on a page (ScrollAnchor). The DeepLink component uses resolvers to handle unknown symbols that need automatic or user-interactive resolution. The ScrollAnchor component ensures that the browser scrolls to the desired content after the DOM has settled, providing a seamless user experience.