0

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

Drew Reese
  • 165,259
  • 14
  • 153
  • 181
roma
  • 141
  • 5
  • 18

1 Answers1

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}/>
                }
            />
        );
    };
Shubham Verma
  • 4,918
  • 1
  • 9
  • 22
  • Can you put this on codesandbox? There might be chance some minor mistake is there – Shubham Verma Aug 17 '20 at 11:21
  • its my first time using sandbox, this is minimal code, it gives errors https://codesandbox.io/s/eloquent-leakey-081mj?file=/src/Main.js this may work – roma Sep 03 '20 at 10:29