Rango Docs
API SwaggerWidget PlaygroundAppWebsite
  • 👋Welcome to Rango
  • 🏠Introduction
  • 💁How It Works
  • ✅Integrations
  • ⚖️Rango vs. Competitors
  • 🔐Security
  • 🛣️Roadmap
  • 🦎Tokenomics
  • 💰Airdrop
  • ❓FAQ
  • 🐞Bug Bounty
  • API Integration
    • 🔡Terminology
    • 🚄API Key & Rate Limits
    • 🤝Choosing the Right API
    • 🦄Basic API - Single Step
      • 🛝API Flow
      • ⚙️API Reference
        • Get Blockchains & Tokens
        • Get Quote
        • Create Transaction (Swap)
        • Check Transaction Status
        • Check Approve Transaction Status
        • Get Address Assets & Balances
        • Get Token Balance
        • Report Transaction Failure
        • Get Direct Tokens
        • Get Custom Token
        • Message Passing
      • 🎓Tutorial
        • 🍰SDK Example
      • 💰Monetization
      • 🎹Sample Transactions
      • ✅Integration Checklist
    • 🦎Main API - Multi Step
      • 🛝API Flow
      • ⚙️API Reference
        • Get Blockchains & Tokens
        • Get Best Route
        • Get All Possible Routes
        • Confirm Route
        • Create Transaction
        • Check Transaction Status
        • Check Approve Transaction Status
        • Report Transaction Failure
        • Get Custom Token
        • Get Address Token Balance
      • 🎓Tutorial
        • 🍰SDK Example
      • 💰Monetization
      • 🎹Sample Transactions
  • ℹ️API Troubleshooting
  • Technical Docs
    • 🍔Swap Aggregation
    • 💰Monetization
    • ⛽Fee Structure
    • ⛽Network Fees and Gas Estimates
    • ⌛Stuck Transactions
  • Widget Integration
    • 🧩Overview
    • 🎇Quick Start
    • ⚙️Customization
    • 💰Monetization
    • 🛣️React Router
    • 🎵Events
    • 💳External Wallets
  • Smart Contracts
    • 👩‍💼Architecture
    • 🔎Audit Reports
    • 🏗️Deployment Addresses
    • 📩Message Passing
  • Ask for Integration
    • 🙋‍♂️DEXs & DEX Aggregators
    • 📱Rango Mobile SDK
  • Useful Links
    • Twitter
    • Discord Server
    • TG Announcements
    • TG Group
  • Terms of Use
  • Privacy policy
Powered by GitBook
On this page

Was this helpful?

  1. Widget Integration

React Router

How to use Rango Widget with React Router?

In case React Router is being used in your project, the following code snippet can be used to integrate Rango Widget.

import React from 'react';
import { Route, Routes } from 'react-router-dom';
import { Widget } from '@rango-dev/widget-embedded';

export function App() {
  return (
    <Routes>
      <Route path="/custom-url/*" element={<Widget config={config} />} />
    </Routes>
  );
}

Alternatively, if React Router is not being utilized, Rango Widget functions seamlessly with its integrated memory router.

PreviousMonetizationNextEvents

Last updated 7 months ago

Was this helpful?

🛣️