How to use `SecureRoute` with React Router v6

235 views Asked by At

I'm using Asgradeo react ADK along with React Router v6. With React Router v5 the SecureRoute works fine. But, for v6 it doesn't. Is there any different API implemented for React Router v6? Didn't find in API documentation https://github.com/asgardeo/asgardeo-auth-react-sdk/blob/main/API.md#securing-routes-with-asgardeo

        <BrowserRouter>
            <Routes>
                <Route path="/" element={<LandingPage/>}/>
                <SecureRoute path="/home" callback={()=>signIn()} component={HomePage}/>
            </Routes>
        </BrowserRouter>

Give following error.

[Wi] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
    at invariant (http://localhost:3000/main.js:1993:11)
    at http://localhost:3000/main.js:40020:108
    at http://localhost:3000/main.js:42639:17
    at http://localhost:3000/main.js:42602:17
    at mapIntoArray (http://localhost:3000/main.js:42493:23)
    at mapIntoArray (http://localhost:3000/main.js:42543:23)
    at mapChildren (http://localhost:3000/main.js:42601:3)
    at Object.forEachChildren [as forEach] (http://localhost:3000/main.js:42638:3)
    at createRoutesFromChildren (http://localhost:3000/main.js:40005:47)
    at Routes (http://localhost:3000/main.js:39848:20)

I'm using @asgardeo/auth-react - v2.0.3 along with react-router-dom - v6.3.0

0

There are 0 answers