Nrthugu

I'm having some problems with implementing PrivateRoute in React. Here is my code:

class App extends Component {



    constructor(props) {

        super(props);



        this.state = {

            currentUser: null,

            loadingUser: true

        }

    }



    componentDidMount() {

        this.onAuth();

    };



    onAuth = () => {

        getCurrentUser().then((json) => {

            console.log(json);

            this.setState({

                currentUser: json,

                loadingUser: false

            })

        }).catch((error) => {

            this.setState({

                currentUser: null,

                loadingUser: false,

            })

        })

    };



    logout = () => {

        logout();

        this.setState({

            currentUser: null,

            loadingUser: false

        });

        this.props.history.push("/");

        toast.info("Succesfully logout.");

    };



    render() {



        return (

            <div className="body">

                <ToastContainer closeOnClick={false}/>

                <ApplicationHeader currentUser={this.state.currentUser} logout={this.logout}/>

                <Grid>

                    <div className="app-content">

                        <Switch>

                            <Route exact path="/vote/:id" render={(props) => <Vote currentUser={this.state.currentUser} {...props}/>}/>



                            <Route exact path="/login" render={() => <Login onAuth={this.onAuth} />}/>



                            <PrivateRoute authed={this.state.currentUser != null} exact path="/vote" component={NewProcess} />

                            <PrivateRoute authed={this.state.currentUser != null} exact path="/items" component={NewItems} />



                            <Route component={NotFound}/>





                        </Switch>

                    </div>

                </Grid>

                <Footer/>

            </div>



        );

    }

}



const PrivateRoute = ({component: Component, authed, ...rest}) => {

    return (

        <Route

            {...rest}

            render={(props) => authed === true

                ? <Component {...props} />

                : <Redirect to={{pathname: '/login', state: {from: props.location}}} />} />

    )

}

When user posts credentials (or App main component gets rendered) onAuth method gets invoked and sets (or not) currentUser property of App's state. This property is null (when user is not authenticated) and represents userdetails such like id and username (when user is authenticated). Then, in PrivateRoute based on that property component gets rendered or application redirects user back to the login page. And that doesn't work well. I mean when i'm already authenticated and try to access any of private route, i am redirected to proper component. Problem occurs in 2 situations:

1. right after logging in - application doesnt redirect me to component
   i want to access, insted i stay on the login page.


2. refreshing page (in browser) corresponded to private route.

It seems like PrivateRoute component doesnt get refreshed when currentUser property gets changed, which is kinda weird because i'm using similar approach in ApplicationHeader to display username when user is authenticated (and that is refreshed correctly).
So, what am i doing wrong here?

I did it rendering the route or the redirect depending on the condition and it worked for me.

Something like the following:

    class PrivateRouteComponent extends React.Component{



    render(){

        return (

        this.props.isAuthenticated===true?

        (

            <Route path={this.props.path} render={this.props.component} />

        ):

        (<Redirect to={{

            pathname: '/login',

            state: { from: this.props.path }

        }} />));

    }

  }