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