尝试从 React 路由器 v3 迁移到 v5，无法弄清楚如何通过“props.children”并在身份验证后重定向

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}/>
                }
            />
        );
    };