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} />);
Embedded login box
Change to hostedLoginBox={false} if you're using embedded login box.
Inside your component you should render the react-router to allow nested routes.
import { Link, Outlet } from 'react-router-dom';
//...
<div>
<Link to="/settings">Open Settings route</Link>
<div>
<div>
<Outlet>
</div>
Updated 6 months ago