React Router Compatibility

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.

<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.