How to use React Router v6 with Frontegg?

Frontegg supports client-side routing with React Router v6. To implement such routing in your application with @frontegg/react, please refer to the example below:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";

import { FronteggProvider, FronteggProviderProps } from "@frontegg/react";
import {
  Route,
  RouterProvider,
  createBrowserRouter,
  createRoutesFromElements,
} from "react-router-dom";
import { Root } from "./Root";
import { Settings } from "./Settings";

const contextOptions: FronteggProviderProps["contextOptions"] = {
  baseUrl: "[your-base-url]",
  clientId: "[your-client-id]",
};

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route
      path="/*"
      element={
        <FronteggProvider contextOptions={contextOptions} hostedLoginBox={true}>
          <App />
        </FronteggProvider>
      }
    >
      <Route path="" element={<Root />} />
      <Route path="settings" element={<Settings />} />
    </Route>
  )
);

const root = ReactDOM.createRoot(document.getElementById("root") as any);
root.render(<RouterProvider router={router} />);

*Change to hostedLoginBox={false} if you're using embedded login box

Inside your <App /> component you should render the react-router <Outlet> to allow nested routes.

import { Link, Outlet } from 'react-router-dom';

//...
<div>
  <Link to="/settings">Open Settings route</Link>
<div>
<div>
  <Outlet>
</div>