1 of 1

React Router Compatibility

Integrate the widget within your router

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.

React Router Compatibility

Integrate the widget within your router

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.