using PrivateRoute in React

Question

In this code, authed state becomes true when the user logs in, but auth used in privateRoute does not become true according to the below code.

checkauth() {
  this.setState({
    authed:true
  })
}

render() {
  function PrivateRoute ({component: Component, auth, ...rest}) {
    return (
      <Route
        {...rest}
        render={(props) => auth === true
              ? <Component {...props} />
              : <Redirect to={{pathname: '/', state: {from: props.location}}} />}
      />
    )
  }

  return (
    <div>
      <Router history={browserHistory}>
        <div>
          <Navbar/>
          <Switch>
            <Route path="/"   component={Firstpage} exact > </Route>
            <Route path="/signup"   component={Signup}> </Route>
            <Route path="/shop/:id" component={Shop}></Route>
            <Route path="/login"  render={(props) => <Login {...props} checkauth= 
{this.checkauth.bind(this)} />}> </Route>
            <PrivateRoute path='/newpath' component={Welcome} auth= 
{this.state.authed}/> 
          </Switch>
        </div>
      </Router>
    </div>
  );
}

How can I use the states of the App component in the PrivateRoute function or is there any other method to do this?

I don't see anything that looks off here. Perhaps share your `Login` component as well. Also, what debugging steps have you taken? How do you know that `auth` is not true? — Levi Payne, Nov 10 '18 at 14:29
Duplicate: https://stackoverflow.com/questions/53197248/how-to-handle-authentication-with-react-router/53197429#53197429 — Matt Carlotta, Nov 10 '18 at 23:21

using PrivateRoute in React

0 Answers0