Trying to migrate from React router v3 to v5 , Unable to figure out how to pass 'props.children' and redirect after authentication

Question

The project uses redux integration ,initial routes look something like this :

 const userIsAuthenticated = connectedReduxRedirect({
        redirectPath: `\login`,
        redirectAction: routerActions.replace,
        wrapperDisplayName: 'UserIsAuthenticated'
    });

 const StandardAuthentication = userIsAuthenticated(
        (props) => props.children
    );


return(
<Provider store={store}>
           
 <ConnectedRouter history={history}>
                    <Switch>
                        <Route
                            path='/register'
                            component={Register}
                        />
                        <Route
                            path='/login'
                            render={() => (
                                    <Login userManager={userManager} />
                                )}
                        />
                         <Route
                                path='/callback'
                                render={() => (
                                    <Callback userManager={userManager} />
                                )}
                            />
//i am trying to change this part
                        <Route component={StandardAuthentication}>
                            <Route path="/" component={App}>
                                   ...many sub routes
                            </Route>
                        </Route>

                        <Route path="*" component={NotFoundExternal}/>
                    </Switch>
                </Router>               
           
 </Provider>)

i added the following as per the comment and a bit of modification from some other source:

 const AuthenticationRoute = ({ component:Component, ...rest}) => {
        return (
            <Route
                {...rest}
                render={(props) => {
                    <StandardAuthentication>
                        <Component {...props} />
                    </StandardAuthentication>;
                }}
            />
        );
    };

and the route as :

<AuthenticationRoute path="/" component={App}/> 

and moved the sub routes to App

It doesnt seem to work.

It goes till callbackpage and the doesnt go to the 'Authentication' route or App but hits the "NotFound" route. Could anybody guide me how to fix this ?

Thanks in Advance

Answer 1

I am not sure but might be this work. You are not calling component right:

const AuthenticationRoute = ({ component:Component, ...rest}) => {
        return (
            <Route
                {...rest}
                render={props => <StandardAuthentication {...props}/>
                }
            />
        );
    };