LI.FI Documentation
LI.FI WebsiteAPI ReferenceHelp / FAQ / Create support ticketRequest API Key
  • 🏡Getting Started
    • ❓What is LI.FI
    • 🌟Why LI.FI?
    • 🆚LI.FI vs Aggregators/DEXs/Bridges
    • 📖LI.FI Terminology
    • ❓FAQ
    • 💡Use Cases
      • Mobile/Gaming Wallets
    • 🏹LI.FI vs. Other Aggregators
    • 🤝Partnership
    • 🌐Powered by LI.FI
  • 🔐Security First
  • ✅List: Chains, Bridges, DEX Aggregators, Solvers
  • 💲Monetization / Take Fees
  • 🔎Transaction Explorer
  • 🔏Rate Limits & API Key
  • How to get integrated by LI.FI?
    • For Bridges
    • For DEXs/Aggregators/Solvers
  • 🆘Technical FAQ
  • LI.FI PRODUCTS
    • Glacis
    • LI.FI Solver
    • LI.FI Intents System
  • LI.FI API
    • ⚙️LI.FI API
      • Transferring Tokens (Example)
      • Requesting supported Chains
      • Requesting all supported Tools
      • Requesting all known Tokens
      • Getting Token Information
      • Getting all possible Connections
      • Requesting a Quote
        • Token Transfer
        • Optimizing quote response timing
        • Cross-Chain Contract Calls
        • Possible Tool Errors
        • Testing your integration
      • Status of a Transaction
      • Requesting Analytics Data
    • ⚔️TX-Batching aka "Zaps"
    • 🏄Solana
      • Request examples
    • 🪙Bitcoin
      • Request examples
    • ⛽LI.Fuel
  • Integrate LI.FI SDK
    • 🚀LI.FI SDK Overview
    • 📦Install LI.FI SDK
    • ⚙️Configure SDK
    • 🪐Configure SDK Providers
    • 📜Request Routes/Quotes
    • 🎯Execute Routes/Quotes
    • ⛓️Chains and Tools
    • 💰Token Management
    • 🕵️Testing Integration
    • 🚗Migrate from v2 to v3
  • INTEGRATE LI.FI WIDGET
    • 🧩LI.FI Widget Overview
    • 📦Install Widget
    • 🎮Select Widget Variants
    • ⚙️Configure Widget
    • 🎨Customize Widget
    • ⚡Widget Events
    • 👛Wallet Management
    • 🌍Internationalization
    • ⚛️Compatibility with Next.js, Remix, Nuxt, etc.
    • 🛣️React Router Compatibility
    • 📖Widget API Reference
    • 🚗Migrate from v2 to v3
  • Smart Contracts
    • Overview
    • Deployments/Contract Addresses
    • Audits
  • Support & Misc.
    • API Status
    • Technical Help Desk & FAQ
    • Create a Partner Ticket
    • Discord Support
    • Telegram Support
    • Twitter
    • Github
    • Licenses
Powered by GitBook
LogoLogo

Connect with us

  • Github
  • Twitter
  • Discord
  • LinkedIn

More Information

  • Help Desk / FAQ
  • API Reference
  • Website
On this page
  • React Router
  • Other Router

Was this helpful?

Export as PDF
  1. INTEGRATE LI.FI WIDGET

React Router Compatibility

Integrate the widget within your router

Last updated 1 year ago

Was this helpful?

LI.FI Widget is fully compatible with React Router v6 and uses it internally for page navigation.

React Router

To operate correctly inside your instance of the React Router context, we check if the widget component is inside the context and, if so, utilize it instead of creating a new one.

The below code shows an example of correctly setting the path to a page with the widget component.

Please pay attention to the asterisk at the end of the path, it is necessary for the correct operation of the paths inside the widget.

<BrowserRouter>
  <Routes>
    <Route path="/swap/*" element={<LiFiWidgetPage />} />
  </Routes>
</BrowserRouter>

Other Router

Well, if you don't use React Router in your app, you don't need to do anything. We will create a memory router inside the widget component, and all the page routing magic will happen internally.

🛣️
📖Widget API Reference