## How to use `@frontegg/react` with React Router v6 and v7

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

See [`contextOptions`](/ciam/sdks/components/fronteggappoptions#contextoptions) and [`hostedLoginBox`](/ciam/sdks/components/fronteggappoptions#hostedloginbox) for more information.


```typescript
import React from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider, createBrowserRouter } from "react-router-dom";
import { FronteggProvider } from "@frontegg/react";
import App from "./App";
import { Root } from "./Root";
import { Settings } from "./Settings";

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

const routes = [
  {
    path: "/*",
    element: (
      <FronteggProvider contextOptions={contextOptions} hostedLoginBox={true}>
        <App />
      </FronteggProvider>
    ),
    children: [
      { path: "", element: <Root /> },
      { path: "settings", element: <Settings /> },
    ],
  },
];

const router = createBrowserRouter(routes);

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


```typescript
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 / >}/>
	)
);
const root = ReactDOM.createRoot(document.getElementById("root") as any);
root.render( < RouterProvider router = { router }
	/>);
```

br
Login method
Switch to `hostedLoginBox={false}` if you're using `@frontegg/react` with the embedded login implementation

br
Inside your `<App />` component you should render the react-router `<Outlet>` to allow nested routes as below:

br

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

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

## How to protect specific routes

If you would like to check that the user is authenticated only on specific routes, you could implement a method similar to the below example in your code:

br

```typescript
import { FC, useEffect } from 'react';
import { useAuthRoutes, useAuthUserOrNull, useIsAuthenticated } from "@frontegg/react";
import { useLocation, useNavigate } from "react-router-dom";

const ProtectRoute: FC = (props) => {
  const user = useAuthUserOrNull();
  const navigate = useNavigate();
  const location = useLocation();
  const { loginUrl } = useAuthRoutes();
  const isAuthenticated = useIsAuthenticated();

  useEffect(() => {
    if(!isAuthenticated) {
      navigate([loginUrl, '?redirectUrl=', encodeURIComponent(location.pathname + location.search + location.hash)].join(''))
    }
  }, [navigate, loginUrl])

  if (isAuthenticated && user)
    return <>{props.children}</>;
  return null;
};

export default ProtectRoute;
```


```typescript
function App() {
    const [isLoading, setIsLoading] = useState(true);


    return (
        <>
            <FronteggProvider customLoader={setIsLoading} {...fronteggOptions}>
                <Routes>
                    <Route path="/" element={<PublicRoutePage/>}/>
                    <Route path="private-route" element={<ProtectRoute><PrivateRoutePage/></ProtectRoute>}/>
                </Routes>
            </FronteggProvider>
            {isLoading && 'This is my custom Loader'}
        </>
    );
}

export default App;
```